反应：setState 不再呈现页面 [重复]答案

【问题标题】：React: setState is not rendering the page again [duplicate]反应：setState 不再呈现页面 [重复]
【发布时间】：2019-07-21 06:37:01
【问题描述】：

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

【问题讨论】：

loadEvents 是做什么的？通常，您希望拥有一个作为函数的道具。然后，渲染组件的处理程序会调用此函数。因此设置状态，调用 props 函数，处理程序执行业务逻辑，然后重新渲染组件。我在这里看到的，你只是设置了没有副作用的状态。
在setState() 的更新完成之前，您正在解构this.state。请记住，setState 是异步的。
loadEvents 是一个 Redux 操作，它调用数据库端点并检索事件列表。我已将按钮移至展示组件并通过道具调用 onClickHandler，状态已更改，但页面未使用新项目呈现。

标签： javascript reactjs react-lifecycle

【解决方案1】：

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

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

【讨论】：

这似乎是合理的，但是当我实现这个修复时，页面仍然没有呈现，而状态已经改变了。
@Rogier 对setState 的调用将导致重新渲染，除非您在shouldComponentUpdate 中明确禁用它。除此之外，您应该查看您的 loadEvents 函数并在那里找到罪魁祸首。