ReactJs В журнале полученных массивов реквизитов отображается пустой массив - PullRequest
Новая
       4

ReactJs В журнале полученных массивов реквизитов отображается пустой массив

0 голосов
/ 13 февраля 2020

Мой код отображает список пользователей с помощью этих компонентов:

Users. js 

class Users extends Component {
  state = {
    usersInformation: []
  };

  componentDidMount() {
    getUsersDataFromDB()
      .then(result => {
        this.setState({
          usersInformation: result.data
        });
      })
      .catch(error => console.error("(1) Outside error:", error));
  }

  render() {
    console.log("this.state.usersInformation");
    console.log(this.state.usersInformation);
    return (
      <div className="animated fadeIn">
        <Fragment>
          <UsersList usersInformation={this.state.usersInformation} />
        </Fragment>
      </div>
    );
  }
}

UsersList. js 

class UsersList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pagesCount:2,
      currentPage: 0,
      pageSize: 5
    };

  }
  componentDidMount() {
    console.log('componentDidMount: this.props.usersInformation')
    console.log(this.props.usersInformation)
  }

  componentWillReceiveProps() {
    console.log('componentWillReceiveProps: this.props.usersInformation')
    console.log(this.props.usersInformation)
  }


  render() {
    return (
      <React.Fragment>
        <Row>
          <Card>
            <CardHeader>
              <i className="fa fa-align-justify"></i> Admins{" "}
              <small className="text-muted">
                La liste complète des admins{" "}
              </small>
            </CardHeader>
            <CardBody>
              <Table responsive hover>
                <thead>
                  <tr>
                    <th scope="col">id</th>
                    <th scope="col">Nom</th>
                    <th scope="col">Email</th>
                    <th scope="col">Role</th>
                    {/* TODO: Derniere == Dernière problem with UTF */}
                    <th scope="col">Derniere connexion</th>
                  </tr>
                </thead>

                <tbody>
                  {this.props.usersInformation
                    .slice(
                      this.state.currentPage * this.state.pageSize,
                      (this.state.currentPage + 1) * this.state.pageSize
                    )
                    .map(userInformation => {
                      return (
                        <tr key={userInformation.id.toString()}>
                          <td>{userInformation.id}</td>
                          <td>{userInformation.nom}</td>
                          <td>{userInformation.email}</td>
                          <td>{userInformation.role}</td>
                          <td>{userInformation.derniereCnx}</td>
                        </tr>
                      );
                    })}
                </tbody>
              </Table>
            </CardBody>

          </Card>
        </Row>
      </React.Fragment>
    );
  }
}

, который дает следующий результат:
enter image description here
В User. js, я извлекаю информацию пользователей из базы данных и передаю ее в качестве реквизитов UsersList.
Проблема в том, что когда я регистрирую usersInformation в UserList. js, внутри двух методов componentWillReceiveProps и componentDidMount , они оба показывают пустой массив, , несмотря на тот факт, что пользовательская информация отображается идеально: 

Users.js:37 this.state.usersInformation
Users.js:38 []
UsersList.js:20 componentDidMount:this.props.usersInformation
UsersList.js:21 []
Users.js:37 this.state.usersInformation
Users.js:38 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
UsersList.js:25 componentWillReceiveProps: this.props.usersInformation
UsersList.js:26 []

Так что я полагаю, что это проблема жизненный цикл компонента React UsersList?
Какой метод жизненного цикла следует использовать, чтобы иметь возможность регистрировать массив usersInformation?

...