ReactJS - 超出最大更新深度错误

Posted 2023-02-22

【中文标题】ReactJS - 超出最大更新深度错误

【英文标题】：ReactJS - Maximum update depth exceeded error

【发布时间】：2020-07-15 03:42:43

【问题描述】：

我遇到了一个错误：

已超过最大更新深度。这可能发生在组件 在 componentWillUpdate 内重复调用 setState 或 组件更新。 React 将嵌套更新的数量限制为 防止无限循环。

代码如下：

  componentDidUpdate() 
    this._updateLocalStorage();

    if (this.state.searchValue !== "") 
      this.setState(
        filteredNotes: this.state.notes.filter(
          note =>
            note.text
              .toLowerCase()
              .indexOf(this.state.searchValue.toLowerCase()) !== -1
        )
      );
     else 
      this.setState(
        filteredNotes: this.state.notes 
      );
    
  

【问题讨论】：

嗨，需要帮助吗？因为我刚刚看到您撤消了接受，如果您遇到其他问题，请随时进行更新。

@keikai 它可以工作，但是当我进行更改时，它并没有立即反映。只有每次更改完成时我都必须刷新浏览器。所以我想我被困在那里了。

状态更新是异步的，您的代码中还有另一个错误，但我确定它与此无关。查看文档：reactjs.org/docs/…

【参考方案1】：

如果在主状态调用之前两个状态相等，则可以通过空比较来修复它。另外，我对 else 条件进行了更改。

  componentDidUpdate(prevProps, prevState) 
    this._updateLocalStorage();

    if (this.state.searchValue !== "") 
      this.setState(
        filteredNotes: this.state.notes.filter(
          note =>
            note.text
              .toLowerCase()
              .indexOf(this.state.searchValue.toLowerCase()) !== -1
        )
      );
     else if(prevState.filteredNotes === this.state.filteredNotes) 
      //do nothing
     else if(this.state.searchValue === "") 
      this.setState(
        filteredNotes: this.state.notes 
      );
    
  

【参考方案2】：

这是正在发生的事情：

在 CDM 中，一旦 this.state.searchValue 变得真实 - 它会更新状态 更新状态触发另一个 CDM 步骤 1. 重复 步骤 2. 重复 无休止的更新...

你应该怎么做：

将 CDU 更新为 componentDidUpdate(prevProps, prevState) 将您的条件更新为：

if(this.state.searchValue !== "" && this.state.searchValue !== prevState.searchValue) ...

【参考方案3】：

如果状态发生变化，每次都会调用 componentDidUpdate。

所以你可能需要在里面谨慎使用setState。

---

对那些setState 严格你的条件。也许像下面这样：

一些注意事项：

对象比较 值/地址参考

componentDidUpdate(pervProps, prevState) 
  if (prevState.filteredNotes !== this.state.filteredNotes) 
    this._updateLocalStorage();
    if (this.state.searchValue !== "") 
      this.setState(
        filteredNotes: this.state.notes.filter(
          note =>
            note.text
              .toLowerCase()
              .indexOf(this.state.searchValue.toLowerCase()) !== -1
        )
      );
     else 
      this.setState(
        filteredNotes: this.state.notes 
      );