Question

我有2个组成部分：PhotoList和分页。在PhotoList内部，我根据存储在PhotoList状态中的componentDidMount值，使用currentPage从服务器调用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 默认值），直到我第二次单击它为止。

请帮助我。谢谢

Answer 1

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

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

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

Answer 2

这是setstate从一个组件到另一个组件的工作示例 https://jsfiddle.net/singhsourav930/1ctg2k7a/7/

class PhotoList extends React.Component {
  /**
   * State
   */
  state = {
    currentPage: 0,
  };

  /**
   * When component did mount
   * This function trigger only once
   * Here you can set your initial values
   */
  componentDidMount() {
    this.setState({ currentPage: 1 });
  }

  /**
   * Page changed
   * @param {Number} numPage
   */
  pageChanged = (numPage) => {
    this.setState({
      currentPage: numPage,
    });
  };

  /**
   * Render
   */
  render() {
    const { currentPage } = this.state;
    console.log(currentPage);
    return (
      <div>
        <Pagination clicked={this.pageChanged} />
      </div>
    );
  }
}

class Pagination extends React.Component {
  render() {
    const { clicked } = this.props;

    return (
      <div>
        <a onClick={() => clicked(2)}>2</a>
        <br />
        <a onClick={() => clicked(3)}>3</a>
        <br />
        <a onClick={() => clicked(4)}>4</a>
        <br />
        <a onClick={() => clicked(5)}>5</a>
      </div>
    );
  }
}

ReactDOM.render(<PhotoList />, document.getElementById('container'));

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

2 个答案: