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));

反应：setState不再呈现页面

1 个答案: