使用useEffect()时，最大深度超过了react错误

Question

错误:警告:超过最大更新深度。当组件在useEffect中调用useEffect时可能会发生这种情况，但是useEffect要么没有依赖数组，要么在每次呈现时都会更改依赖项之一。

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

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

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

Answer 1

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

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

这相当于在没有任何条件的情况下在componentDidUpdate中设置状态。您正在useEffect中更新状态，这是正确的，但是在dependency array中传递相同的状态作为一个参数，该参数在您的效果中将被更新为dependency array。您应该设置，更改您的依赖注入，您应该重新评估您的代码，并相应地标记您的依赖数组。如果您将products设置为效果的依赖数组，那么您只是说，每当products，更新时，运行此效果的响应就会发生，而内部效果只是更新products，，因此没有任何意义，您可以做的一件事是使用辅助状态来运行效果。

Answer 2

打电话给setItems (你是说setProducts，对吗？)在useEffect中，强制更新products状态，然后强制调用useEffect。

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

形成一个循环。