如何将我从API获取的数据显示到react-material datatable

Question

我是第一次在react.js中使用materialUI表，我想尝试使用react-material表，但我迷路了，因为我如何在表中显示我的数据，假设我有28个数据，实际上它已经在分页中显示了正确的数字，但是数据本身没有显示任何东西。这是react-material表格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的示例：

​

​

Answer 1

最后，我可以解决这个问题，如果你的数据没有显示，但它在console.log中显示，这个答案适用于面临同样问题的react-material表。您必须在column中检查field

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，那么您必须这样声明column 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时遇到困难的人