反应：setState 不再渲染页面

Question

我在 React 和生命周期方面苦苦挣扎。我尝试实现一个非常简单的 Next 按钮，该按钮显示带有下一组项目的下一页。当我手动将状态偏移更改为 3 时，页面将正确呈现下一个项目。但是当我通过按钮使用 setState 时，不会加载新项目。我认为它与生命周期有关，但我还不明白。

class EventsListContainer extends React.Component {
  state = {
    limit: 3,
    offset: 0
  };

  componentDidMount() {
    const { loadEvents } = this.props;
    const { limit, offset } = this.state;
    loadEvents(limit, offset);
  }

  onClickHandler = () => {
    this.setState({ limit: 3, offset: 3 });
    const { limit, offset } = this.state;
    loadEvents(limit, offset);
  };

  render() {
    const { events, isLoggedIn } = this.props;

    return (
      <div>
        <EventsList events={events} isLoggedIn={isLoggedIn} />
        <Button onClick={() => this.onClickHandler()}>Next</Button>
      </div>
    );
  }
}

Answer 1

调用setState是异步的。您可以通过添加回调来修复它，例如

this.setState({ limit: 3, offset: 3 }, () => loadEvents(this.state.limit, this.state.offset));