React：setState不再呈现页面[重复]

Question

我在与反应和生命周期作斗争。我尝试实现一个非常简单的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));