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

问题描述 投票:0回答:1

我在react.js中使用materialUI表时是新手,我想尝试使用react-material表,但是由于如何在表中显示数据而迷路了,假设我有28个数据,实际上它已经在分页中显示正确的数字,但数据本身不显示任何内容。这是反应物料表Check this的文档链接。

我已经阅读了一些与此相关的主题,但是全部使用tableRowtableHead等。

这是我的组件代码:

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,但表本身未显示任何数据

in the bottom of the image there is 1-5 of 28 data but nothing show in the table

有人可以帮我吗?如何显示orders中的数据,这是我拥有的图像json的示例:

my data table

javascript reactjs
1个回答
0
投票

最后,我可以解决此问题,如果您的数据未显示但在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具有citycolorweight,那么您必须这样声明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}
/>

您可以像下面显示的那样获得数据

The result that I got

我希望这个答案可以帮助您在react-material table时遇到困难的人>

© www.soinside.com 2019 - 2024. All rights reserved.