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

【问题标题】：ReactJS - Maximum update depth exceeded errorReactJS - 超出最大更新深度错误
【发布时间】：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/…

标签： reactjs

【解决方案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 
      });
    }
  }
}

【讨论】：