为什么componentDidUpdate是无限更新的？

Question

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

我将代码放在沙箱中，希望它会清楚。 https://codesandbox.io/s/headless-smoke-4xxi2

Answer 1

原因：：这似乎是参考/可变内存地址问题。

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

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

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

OR

1. 通过此语句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();
    }
  }