使用 useEffect() 时超出最大深度反应错误

Question

错误：警告：超出最大更新深度。当组件在 useEffect 中调用 setState 时，可能会发生这种情况，但 useEffect 没有依赖项数组，或者依赖项之一在每次渲染时都会发生变化。

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

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

当将一个空数组作为第二个参数传递时，应用程序工作正常但为了反映页面上的更改我必须刷新它，但是在将 'items' 对象作为第二个参数传递后数组，我收到上述错误。

Answer 1

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

通过将 [products] 作为第二个参数传递，您可以观察在此字段上所做的更改。 products 的值发生变化。我猜这是因为 getCartProducts() 产生了新的引用（是 non-primitive，像一个对象，或者一个数组）。这就是为什么 React 认为这个领域已经改变了。

这形成了一个循环。

Answer 2

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

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

相当于在componentDidUpdate里面无条件设置state。您在 useEffect 内更新您的状态是正确的，但在 dependency array 内传递相同的状态作为将在您的效果内更新的参数是 wrong.您应该设置更改您的依赖项注入，您应该 re-evaluate 您的代码并相应地标记您的依赖项数组。如果您将 products 设置为您的效果的依赖数组，那么您只是说只要 products 更新并在内部效果您就对运行这个效果做出反应只是更新 products，所以它没有任何意义，你可以做的一件事是使用辅助状态运行调整你的效果。

使用 useEffect() 时超出最大深度反应错误

Maximum depth exceeded react error while using useEffect()

node.js

reactjs

react-hooks

use-effect

use-state