Javascript 如何显示我从API获得的数据以反应物料数据表

在react.js中使用materialUI表时我是新手，我想尝试使用react material表，但我不知道如何在表中显示我的数据，假设我有28个数据，事实上它已经在分页中显示了正确的数字，但数据本身没有显示任何内容。这是react物料表的文档链接

我已经读过几个关于这方面的主题，但都是使用

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 };

import React，{Component}来自'React'；
从“物料表”导入物料表；
从“../../../../Helpers/history”导入{history}；
从“道具类型”导入道具类型；
从'react redux'导入{connect}；
从“react router dom”导入{withRouter}；
从“../../../../Actions/orderActions”导入{orderActions}；
从“@material ui/core/styles”导入{withStyles}”；
//组成部分
导入“./tabledata.css”；
常量样式=主题=>({
“@global”：{
正文：{
背景色：theme.palette.common.white，
},
},
});
类Tabledata扩展组件{
建造师（道具）{
超级（道具）；
//const{orders}=this.props；
此.state={
栏目：[
{标题：'Nama Pemesanan'，字段：'name'}，
{标题：'Status'，字段：'Status'}，
{title:'Estimasi Pengerjaan（Hari）'字段：'estimate'，键入：'numeric'}，
{标题：'Jumlah Pesanan（pcs）'字段：'unit'，类型：'numeric'}，
{title:'Harga（Rp）'字段：'price'，键入：'numeric'}，
],
数据：[
{
id:2，
名字：“拉拉”，
状态：“Penyablonan”，
估计数：8，
单位：36，
价格：'36.000.000'，
},
],
}
}
componentDidMount（）{
if（localStorage.getItem（'auth'））{
const{dispatch}=this.props；
分派（orderActions.getAllOrder（））；
//history.push（'/dashboard'）；
}
}
组件将接收道具（新道具）{
this.setState（{loading:newProps.loading}）；//在登录或登录失败时删除加载进度
}
handleChange=prop=>event=>{
this.setState（{[prop]：event.target.value}）；
};
更改（数据）{
日志（“检查ID:，数据”）；
}
render（）{
const{orders}=this.props；
log（“测试控制台：”，命令）
返回(
);
}
}
Tabledata.propTypes={
类：PropTypes.object.isRequired
};
常量mapStateToProps=（状态）=>{
const{orders}=state.orderPage；
返回{
命令
};
}
const CONNECTEDTABLEDATABLEDATAPAGE=带路由器（连接（mapStateToProps）、、”{
纯：假
})（使用样式（样式）（表格数据））；
将{connectedTableDataPage导出为Tabledata}；

如您所见，此材质表有一个类似的组件

<MaterialTable
 title="Daftar Pesanan"
 columns={this.state.columns}
 key={orders._id}
 data={orders}
/>

<MaterialTable
 title="Daftar Pesanan"
 columns={this.state.columns}
 key={orders._id}
 data={orders}
/>

正如您所看到的，在图像的底部，您可以看到28个数据中的

1-5个

，在我的控制台中正好有

28个数据

，但表格本身没有显示任何数据

有人能帮我吗？如何在

订单中显示数据，这是我拥有的图像json示例：

最后，我可以解决这个问题，如果您的数据没有显示，但显示在
控制台.log
中，这个答案适用于您在react material table中遇到相同问题的人。您必须检查
列中的
字段

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
，那么您必须声明
列字段
：

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}
/>

<MaterialTable
 title="Daftar Pesanan"
 columns={this.state.columns}
 key={orders._id}
 data={orders}
/>



你可以得到我在下面展示的数据


我希望这个答案能帮助那些在
react material table
方面遇到困难的人。我这里有一个问题，我们是否需要在从react的componentDidMount hook中的API获得响应后才开始设置状态？对于我的情况，是的，我首先得到响应，然后再将其分配给状态