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

Question

如果有人可以帮助我吗？ 我需要这个函数来存储状态中的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
            })
        }
    }
}

Answer 1

在componentDidUpdate设置状态时需要非常小心。 调用setState更新组件，触发componentDidUpdate ，调用setState等等，导致无限循环。 来自React 文档：

您可以在componentDidUpdate() setState()立即调用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
      });
    }
  }
}