时间戳

首页 > 解决方案 > 更改状态后，React 组件不会重新渲染

reactjs - 更改状态后，React 组件不会重新渲染

问题描述

我有 2 个组件：PhotoList 和 Pagination。在 PhotoList 内部，我使用componentDidMount基于currentPagePhotoList 状态中存储的值从服务器调用 api。

我还编写pageChanged了更改currentPage值的方法并将此方法传递props给分页组件

pageChanged = (numPage) => {
    this.setState({
      currentPage: numPage
    });
    // console.log("Day la currentPage hien tai: ",this.state.currentPage);
  }

<Pagination 
            totalPages={Math.floor(this.state.totalImages/30)+1}
            clicked={this.pageChanged}
/>

在分页组件内部，我像这样调用了上面的方法

<a onClick={(event) => {this.props.clicked(event.target.text)}}>2</a>

所以我只是更新了currentPage值，但我的 PhotoList 组件没有重新渲染。另一件事是当我第一次单击它时，该currentPage值不会改变（仍然是 1默认值），直到我第二次单击它。

请帮助我。谢谢

标签： reactjs

解决方案

componentDidMount()仅在第一次渲染组件时调用一次。pageChanged您应该在调用 时或调用之后调用api setState。

此外，setState它是异步的，因此当您第一次单击时，它不会记录更新的值。例如，你可以这样做

pageChanged = (numPage) => {
   this.setState({
      currentPage: numPage
   }, () => { 
      // console.log("Day la currentPage hien tai: ",this.state.currentPage);
      /* YOUR API CALL */ 
   });
}

推荐阅读