1

我正在使用material-ui库并制作数据表。对于数据表，我正在使用这个库mui-datatables。我需要调用 API 来检索数据并在表格中显示。我在控制台中检查了数据即将到来但未显示在数据表中。

下面是我的代码：

state = {
    students: [],
    rows: []
};

componentDidMount() {
    document.title = "List of students";

    axios
        .get("api.url")
        .then(res => {
            this.setState({ students: res.data }, () => {
                this.state.students.forEach((value, index) => {
                    this.state.rows.push({
                        digitalcredid: value.studentid,
                        firstname: value.firstname,
                        lastname: value.lastname,
                        email: value.email,
                        nationality: value.nationality,
                        postaladress: value.postaladress,
                        nic: value.nic
                    });
                });
            });
        });
}

并显示如下数据：

const options = {
     filterType: "checkbox",
     serverSide: true,
     print: false
};

<div className="row">
     <div className="col-12">
          <MUIDataTable
               title={"Student List"}
               data={this.state.rows}
               columns={studentColumns}
               options={options}
            />
      </div>
 </div>

如果有人帮助我，那就太好了。

4

1 回答 1

1

您直接改变状态以更新rows而不是调用setState，因此不会触发重新渲染。试试这个 ：

componentDidMount() {
    document.title = "List of students";

    axios.get("api.url").then(res => {
      const rows = [];

      res.data.forEach((value, index) => {
        rows.push({
          digitalcredid: value.studentid,
          firstname: value.firstname,
          lastname: value.lastname,
          email: value.email,
          nationality: value.nationality,
          postaladress: value.postaladress,
          nic: value.nic
        });
      });

      this.setState({ students: res.data, rows });
    });
  }

来自 React文档：

setState() 将组件状态的更改加入队列，并告诉 React 该组件及其子组件需要使用更新的状态重新渲染。

state也可以像上面那样直接突变。但这不会触发重新渲染。setState因此，如果您需要显示新数据，请始终更新状态。

于 2019-11-02T08:09:30.133 回答