在 ComponentDidUpdate() 中设置状态 setState() 进入无限循环？答案

【问题标题】：Setting state setState() inside ComponentDidUpdate() going to infinite loop?在 ComponentDidUpdate() 中设置状态 setState() 进入无限循环？
【发布时间】：2019-12-07 20:46:49
【问题描述】：

如果有人可以帮我解决这个问题？我需要这个函数来存储状态中的filteredObject 键。但是当我在componentDidMount() 中调用此函数时，它不起作用，当我在ComponentDidUpdate() 中调用它时，它起作用但进入无限循环？

userData = () => {
    const returnedEmail = storageManger.getEmailFromStore();
    const { agents } = this.state;
    if (returnedEmail) {
        const filteredEmail = agents.find(agent => { return agent.email === returnedEmail })        
        if (filteredEmail) {
            this.setState({
                agentApplicationId: filteredEmail.properties
            })
        }
    }
}

【问题讨论】：

你确定这个用途吗？ : "const { 代理 } = this.state;"
什么时候需要运行这个userData函数？含义取决于更改哪些具体值？看起来agents 与此处相关，但您如何管理对returnedEmail 的更改？
对于所有在 props 和 state 改变后触发的生命周期肯定会遇到同样的情况。如果您尝试设置状态，它将进入无限循环和最大调用堆栈。当您从存储中获得返回的电子邮件时，您可以尝试这样做吗？然后你尝试在安装生命周期中执行。

标签： javascript reactjs

【解决方案1】：

在componentDidUpdate 中设置状态时需要非常小心。调用setState更新组件，触发componentDidUpdate，调用setState，以此类推，导致死循环。来自React docs：

您可以立即在componentDidUpdate() 中调用setState()，但请注意，它必须包含在条件中……否则会导致无限循环。

解决方案是添加某种条件，这样您就不会不必要地更新状态。例如：

userData = () => {
  const returnedEmail = storageManger.getEmailFromStore();
  const { agents, agentApplicationId } = this.state;

  if (returnedEmail) {
    const filteredEmail = agents.find(agent => agent.email === returnedEmail);

    // Add an extra condition here to prevent state from updating if the values are already equal.
    if (filteredEmail && filteredEmail.properties !== agentApplicationId) {
      this.setState({
        agentApplicationId: filteredEmail.properties
      });
    }
  }
}

【讨论】：