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

Posted 2023-02-21

【中文标题】反应：setState 不再呈现页面 [重复]

【英文标题】：React: setState is not rendering the page again [duplicate]

【发布时间】：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，状态已更改，但页面未使用新项目呈现。

【参考方案1】：

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

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

【讨论】：

这似乎是合理的，但是当我实现这个修复时，页面仍然没有呈现，而状态已经改变了。

@Rogier 对setState 的调用将导致重新渲染，除非您在shouldComponentUpdate 中明确禁用它。除此之外，您应该查看您的 loadEvents 函数并在那里找到罪魁祸首。