反应:setState不再呈现页面

时间:2019-02-27 14:00:21

标签: javascript reactjs react-lifecycle

我在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>
    );
  }
}

1 个答案:

答案 0 :(得分:4)

setState上的调用是异步的。您可以通过添加回调(例如

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