Состояние меняется, но данные не отображаются, новые данные - PullRequest
Новая
       35

Состояние меняется, но данные не отображаются, новые данные

0 голосов
/ 02 ноября 2019

Я работаю с библиотекой 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>

Было бы здорово, если бы кто-нибудь помог мне.

1 Ответ

1 голос
/ 02 ноября 2019

Вы напрямую изменяете состояние для обновления 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, если вам нужны свежие данные для отображения.

...