为什么 componentDidUpdate 会无限更新？

Question

我需要拖放图片，然后上传到服务器并更新界面。我有一个问题，生命周期方法 componentDidUpdate 开始无限更新，在我指示将 this.state 与 prevState 进行比较的情况下。（PrevState 未定义，我不明白为什么）。

我把我的代码放在沙箱里了，我希望它会很清楚。 https://codesandbox.io/s/headless-smoke-4xxi2

Answer 1

原因： 这似乎是 reference/variable 内存地址问题。

当您存储到 itemsList 时，您正在创建一个新引用，因为您从 api 接收到一个 non-primitive 值。当涉及到 non-primitive 值时，JS 总是使用引用进行操作。因此，您的 if (this.state.itemsList !== prevState.itemsList) 将始终 return true 因为 itemsList 是一个数组，它是 non-primitive 数据集，这意味着 JS 不检查它的值，而只检查引用.

在这种情况下，我看到了两种解决方案：

如果值相同则阻止更新状态

或

在此语句中使用适当的检查器功能按值检查 if (this.state.itemsList !== prevState.itemsList)

希望我能解释清楚。干杯！

Answer 2

您没有使用正确的参数。请参阅 componentDidUpdate 将 prevProps 作为第一个参数，将 prevState 作为第二个参数。

试试这个

componentDidUpdate(prevProps, prevState)

Answer 3

prevState 是 componentDidUpdate 的第二个参数。尝试 -

componentDidUpdate(prevProp, prevState) {
    console.log(this.state.itemsList, prevState.itemsList);
    if (this.state.itemsList !== prevState.itemsList) {
      // if you remove the comment from this method, then an infinite update will begin
      //
       this.updateItemList();
    }
  }

为什么 componentDidUpdate 会无限更新？

Why the componentDidUpdate is infinitely updated?

reactjs

react-lifecycle