即使状态匹配也可以反应componentDidUpdate无限循环

Question

每当组件更新时，我都在尝试更新状态。这样做是因为我重用了该组件以显示来自API的不同数据。但是有一个问题-即使我检查状态是否与响应数据不同，componentDidUpdate也会创建一个无限循环。

我将添加一些代码。

timestamp

是否有任何变通方法来避免每次更新组件时都发出API请求？我的componentDidMount函数中有一个API请求，但它仅适用于初始渲染。

Answer 1

不幸的是，比较javascript中的对象要比比较字符串或数字复杂一些。 在您的示例中，您实际上不是在比较对象是否相等，而是在 reference 是否相等的情况下，不是这样。

Here是一个比较对象的示例，可能对您有用。但是我建议您根据您的res.data的样子，尝试仅比较某些指标而不是整个对象，具体取决于实际更改的属性。

Answer 2

var list = List2.FindAll(y => List1.Any(x => y.name==x.name)); 正在执行引用检查，这意味着由于res.data !== products和res.data指向内存中的不同对象，它将始终返回true（除非axios保留了响应对象的缓存，我不认为这样。

一种实现所需目标的方法是使用componentDidUpdate的products参数来确定prevProps是否已更改：

props.match.params.id

另一种选择是使用isEqual之类的方法执行深度平等检查。

Answer 3

您应该使用ComponentDidMount。实际上，您只需要获取一次产品列表（先验）。

Answer 4

与其比较始终是不同引用的整个对象/数组，不如 比较一些原始数据。

在从阵列中添加或删除产品的情况下，类似id的东西或阵列的长度应该可以正常工作。