Question

错误：警告：超出最大更新深度。当组件在useEffect中调用setState时会发生这种情况，但useEffect要么没有依赖项数组，要么在每个渲染器上都有一个依赖项更改。

const [products, setProducts] = useState([]);

useEffect(() => {
  setProducts(getCartProducts());
}, [products]);

当将空数组作为第二个参数传递时，应用程序运行良好，但为了反映页面上的更改，我必须刷新它，但是在将“ items”对象作为数组中的第二个参数传递后，我收到上述错误。

Answer 1

在setItems中调用setProducts（您的意思是useEffect，对吗？），强制products状态被更新，然后强制useEffect被更新叫。

通过传递[products]作为第二个参数，您可以监视在此字段上所做的更改。 products的值也会改变。我猜这是因为getCartProducts()产生了新的引用（是非原始的，如对象或数组）。这就是为什么React认为领域已经改变的原因。

那形成一个循环。

Answer 2

const [products, setProducts] = useState([]);

useEffect(() => {
  setProducts(getCartProducts());
}, [products]);

这等效于在没有任何条件的情况下在componentDidUpdate中设置状态。您正在useEffect内更新状态，这是正确的，但将在dependency array内传递相同状态的参数作为 wrong ，该参数将在您的效果内更新。您应该设置更改依赖项注入，然后应该重新评估代码并相应地标记依赖项数组。如果您将products设置为效果的依赖项数组，那么您只是说要在 products 更新时对运行此效果的反应做出反应，而内部效果只是在更新 { {1}} ，所以这没有任何意义，您可以做的一件事就是使用辅助状态来运行效果。

使用useEffect（）时超出最大深度反应错误

2 个答案: