如何解决从api提取数据到material-table-ui
实现api提取后出现此错误 通过apollo,查询
class Vehicles extends Component {
state = {
columns : [
{ title: 'VIN',field: "VIN"},{ title: 'REGISTRATION_PLATE',field: 'REGISTRATION_PLATE' },// { title: 'Contract',initialEditValue :'customer',field: 'contract',lookup: {'customer' : 'Customer 1'} },// { title: 'Debit',initialEditValue : 100,field: 'debit',type : 'numeric',},// { title: 'Credit',field: 'credit',}
],data : [
],active: "1"
}
componentDidMount() {
console.log(vehicleQuery)
this.props.client.query({
query: vehicleQuery,}
).then(values =>{
var mapped = _.map(values.data.vehicleQuery,_.partialRight(_.pick,['VIN','REGISTRATION_PLATE']));
console.log(mapped)
this.setState({data : mapped})
})
}
toggle = tab => {
if (this.state.active !== tab) {
this.setState({ active: tab })
}
}
render() {
return (
<React.Fragment>
<Breadcrumbs
breadCrumbTitle="Vehicles"
breadCrumbParent="Working Area"
breadCrumbActive="Vehicles"
/>
<div>
</div>
<Nav tabs className="nav-justified">
<NavItem>
<NavLink
className={classnames({
active: this.state.active === "1"
})}
onClick={() => {
this.toggle("1")
}}
>
All
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.active}>
<TabPane tabId="1">
<Table title={'All Vehicles'} data={this.state} onRowAdd={this.onRowAdd} onRowUpdate={this.onRowUpdate} onRowDelete={this.onRowDelete}/>
</TabPane>
</TabContent>
</React.Fragment>
);
}
}
export default connect()(withApollo(Vehicles));
编译时出现以下错误
index.js:1 Warning: React does not recognize the `cellEditable` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute,spell it as lowercase `celleditable` instead. If you accidentally passed it from a parent component,remove it from the DOM element.
in td (created by ForwardRef(TableCell))
in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
in WithStyles(ForwardRef(TableCell)) (created by MTableCell)
in MTableCell (created by MTableBodyRow)
in tr (created by ForwardRef(TableRow))
in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
in MTableBodyRow (created by MTableBody)
in tbody (created by ForwardRef(TableBody))
in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
in MTableBody (created by Droppable)
in table (created by ForwardRef(Table))
in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
in WithStyles(ForwardRef(Table)) (created by Droppable)
in div (created by Droppable)
in div (created by Droppable)
in div (created by Droppable)
in Droppable (created by ConnectFunction)
in ConnectFunction
in ConnectFunction (created by MaterialTable)
in div
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (created by MaterialTable)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by Container)
in Container (created by MaterialTable)
in Provider (created by App)
in App (created by ErrorBoundary)
in ErrorBoundary (created by DragDropContext)
in DragDropContext (created by MaterialTable)
in MaterialTable
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (at table.js:43)
in div (at table.js:42)
in Table (at vehicles.js:97)
in div (created by Context.Consumer)
in TabPane (at vehicles.js:96)
in div (created by TabContent)
in TabContent (at vehicles.js:95)
in Vehicles (created by Context.Consumer)
in ApolloConsumer (created by withApollo(Vehicles))
in withApollo(Vehicles) (created by ConnectFunction)
in ConnectFunction (at Router.js:113)
in Suspense (at Router.js:112)
in div (at VerticalLayout.js:277)
in div (at VerticalLayout.js:271)
in div (at VerticalLayout.js:255)
in VerticalLayout (created by ConnectFunction)
in ConnectFunction (at Router.js:111)
in Route (at Router.js:98)
in RouteConfig (created by ConnectFunction)
in ConnectFunction (at Router.js:189)
in Switch (at Router.js:144)
in Router (at Router.js:143)
in ApolloProvider (at Router.js:142)
in AppRouter (at App.js:11)
in App (at src/index.js:29)
in Layout (at src/index.js:28)
in Suspense (at src/index.js:27)
in Provider (at src/index.js:26)
index.js:1 Warning: Unknown event handler property `onCellEditFinished`. It will be ignored.
in tr (created by ForwardRef(TableRow))
in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
in MTableBodyRow (created by MTableBody)
in tbody (created by ForwardRef(TableBody))
in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
in MTableBody (created by Droppable)
in table (created by ForwardRef(Table))
in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
in WithStyles(ForwardRef(Table)) (created by Droppable)
in div (created by Droppable)
in div (created by Droppable)
in div (created by Droppable)
in Droppable (created by ConnectFunction)
in ConnectFunction
in ConnectFunction (created by MaterialTable)
in div
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (created by MaterialTable)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by Container)
in Container (created by MaterialTable)
in Provider (created by App)
in App (created by ErrorBoundary)
in ErrorBoundary (created by DragDropContext)
in DragDropContext (created by MaterialTable)
in MaterialTable
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (at table.js:43)
in div (at table.js:42)
in Table (at vehicles.js:97)
in div (created by Context.Consumer)
in TabPane (at vehicles.js:96)
in div (created by TabContent)
in TabContent (at vehicles.js:95)
in Vehicles (created by Context.Consumer)
in ApolloConsumer (created by withApollo(Vehicles))
in withApollo(Vehicles) (created by ConnectFunction)
in ConnectFunction (at Router.js:113)
in Suspense (at Router.js:112)
in div (at VerticalLayout.js:277)
in div (at VerticalLayout.js:271)
in div (at VerticalLayout.js:255)
in VerticalLayout (created by ConnectFunction)
in ConnectFunction (at Router.js:111)
in Route (at Router.js:98)
in RouteConfig (created by ConnectFunction)
in ConnectFunction (at Router.js:189)
in Switch (at Router.js:144)
in Router (at Router.js:143)
in ApolloProvider (at Router.js:142)
in AppRouter (at App.js:11)
in App (at src/index.js:29)
in Layout (at src/index.js:28)
in Suspense (at src/index.js:27)
in Provider (at src/index.js:26)
Table.js
class Table extends Component {
render() {
return (
<div>
<MaterialTable
icons={tableIcons}
title={this.props.title}
columns={this.props.data.columns}
data={this.props.data.data}
editable={{
onRowAdd : this.props.onRowAdd && ((newData) => this.props.onRowAdd(newData)),onRowUpdate:this.props.onRowAdd && ((newData,oldData) =>this.props.onRowUpdate(newData,oldData)),onRowDelete: this.props.onRowAdd && ((oldData) =>this.props.onRowDelete(oldData)),}}
options={{
filtering: true
}}
/>
</div>
);
}
}
export default Table;
我已遵循材料表ui中的文档 并尝试以这样的承诺获取数据
import MaterialTable from 'material-table';
<MaterialTable
// other props
data={query =>
new Promise((resolve,reject) => {
// prepare your data and then call resolve like this:
resolve({
data: // your data array
page: // current page number
totalCount: // total row number
});
})
}
/>;
但是当传递阿波罗查询功能时,出现此错误:
cannot read then of type undefined
我需要实现的是设置一个数据数组,以使材料表从i中读取
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。