我在react.js中使用materialUI表时是新手,我想尝试使用react-material表,但是由于如何在表中显示数据而迷路了,假设我有28个数据,实际上它已经在分页中显示正确的数字,但数据本身不显示任何内容。这是反应物料表Check this的文档链接。
我已经阅读了一些与此相关的主题,但是全部使用tableRow
,tableHead
等。
这是我的组件代码:
import React, { Component } from 'react';
import MaterialTable from 'material-table';
import { history } from '../../../../Helpers/history';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { orderActions } from '../../../../Actions/orderActions';
import { withStyles } from '@material-ui/core/styles';
// Component
import './tabledata.css';
const styles = theme => ({
'@global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
});
class Tabledata extends Component {
constructor(props) {
super(props);
// const { orders } = this.props;
this.state = {
columns: [
{ title: 'Nama Pemesanan', field: 'name' },
{ title: 'Status', field: 'status' },
{ title: 'Estimasi Pengerjaan (Hari)', field: 'estimate', type: 'numeric' },
{ title: 'Jumlah Pesanan (pcs)', field: 'unit', type: 'numeric' },
{ title: 'Harga (Rp)', field: 'price', type: 'numeric' },
],
data: [
{
id: 2,
name: 'lala',
status: 'Penyablonan',
estimate: 8,
unit: 36,
price: '36.000.000',
},
],
}
}
componentDidMount() {
if(localStorage.getItem('auth')) {
const { dispatch } = this.props;
dispatch(orderActions.getAllOrder());
// history.push('/dashboard');
}
}
componentWillReceiveProps(newProps){
this.setState({ loading: newProps.loading }); // remove the loading progress when logged in or fail to log in
}
handleChange = prop => event => {
this.setState({ [prop]: event.target.value });
};
change(data){
console.log("Check ID : ", data);
}
render(){
const { orders } = this.props;
console.log("test console : ", orders)
return (
<div className="tabledata-order">
<div className="row item-section">
<div className="col">
<div className="card">
<div className="card-body">
<MaterialTable
title="Daftar Pesanan"
columns={this.state.columns}
key={orders._id}
data={orders}
/>
</div>
</div>
</div>
</div>
</div>
);
}
}
Tabledata.propTypes = {
classes: PropTypes.object.isRequired
};
const mapStateToProps = (state) => {
const { orders } = state.orderPage;
return {
orders
};
}
const connectedTableDataPage = withRouter(connect(mapStateToProps, '', '', {
pure: false
}) (withStyles(styles)(Tabledata)));
export { connectedTableDataPage as Tabledata };
如您所见,此物料表具有这样的组件
<MaterialTable
title="Daftar Pesanan"
columns={this.state.columns}
key={orders._id}
data={orders}
/>
如您所见,在图像的底部可以看到1-5 of 28
,而在我的控制台中恰好是28 data
,但表本身未显示任何数据
有人可以帮我吗?如何显示orders
中的数据,这是我拥有的图像json的示例:
最后,我可以解决此问题,如果您的数据未显示但在console.log
中显示,则此答案适用于使用材料表遇到的相同问题。您必须在field
]中检查collumn
this.state = { columns: [ { title: 'Nama Pemesanan', field: 'name' }, { title: 'Status', field: 'status' }, { title: 'Estimasi Pengerjaan (Hari)', field: 'estimate', type: 'numeric' }, { title: 'Jumlah Pesanan (pcs)', field: 'unit', type: 'numeric' }, { title: 'Harga (Rp)', field: 'price', type: 'numeric' }, ], data: [ { id: 2, name: 'lala', status: 'Penyablonan', estimate: 8, unit: 36, price: '36.000.000', }, ], }
说,我得到的json具有
city
,color
和weight
,那么您必须这样声明collumn field
:
this.state = { columns: [ { title: 'detail Address', field: 'city' }, { title: 'color', field: 'color' }, { title: 'weight', field: 'weight' }, ], }
对于
MaterialTable
,您可以像这样放置所有具有的变量
<MaterialTable title="Daftar Pesanan" columns={this.state.columns} key={orders._id} data={orders} />
您可以像下面显示的那样获得数据
我希望这个答案可以帮助您在react-material table
时遇到困难的人>