每当调用Cart组件(如下所示(时，我都会面临这个错误(重复数千次，直到页面崩溃(：
index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in Cart (created by Context.Consumer)
in Route (at Routes.js:24)
in Switch (at Routes.js:23)
in Router (created by BrowserRouter)
in BrowserRouter (at Routes.js:22)
in Routes (at src/index.js:5)
我的购物车组件：
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Layout from "./Layout";
import { getCart } from "./cartHelpers";
import Card from "./Card";
import Checkout from "./Checkout";
const Cart = () => {
const [items, setItems] = useState([]);
useEffect(() => {
setItems(getCart());
}, [items]);
const showItems = items => {
return (
<div>
<h2>Your cart has {`${items.length}`} items</h2>
<hr />
{items.map((product, i) => (
<Card
key={i}
product={product}
showAddToCartButton={false}
cartUpdate={true}
showRemoveProductButton={true}
/>
))}
</div>
);
};
const noItemsMessage = () => (
<h2>
Your cart is empty. <br /> <Link to="/shop">Continue shopping</Link>
</h2>
);
return (
<Layout
className="container-fluid"
>
<div className="row">
<div className="col-6">
{items.length > 0 ? showItems(items) : noItemsMessage()}
</div>
<div className="col-6">
<h2 className="mb-4">Your cart summary</h2>
<hr />
<Checkout products={items} />
</div>
</div>
</Layout>
);
};
export default Cart;
useEffect正在调用getCart()(如下所示(：
export const getCart = () => {
if (typeof window !== "undefined") {
if (localStorage.getItem("cart")) {
return JSON.parse(localStorage.getItem("cart"));
}
}
return [];
};
我打算让getCart从localStorage中获取购物车，并将其填充到状态变量items中，或者返回一个空数组[]
据我所知，每当状态发生变化时，useEffect就会更改页面，当依赖数组中有任何项时，它将基于此
我不明白为什么会发生这个错误
我真的试着理解这个错误can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render，以下是我迄今为止在解决这个问题时学到的：
items，依赖项，变化不大。测试添加1个项目或0个项目会导致数千个相同的错误- 删除useEffect会完全停止错误，但无法将其绑定到项状态变量
如何停止此错误？
我只想让这个组件在不冻结的情况下工作，并在渲染时抛出数千个这样的错误。
原因在于您的useEffect依赖项：
useEffect(() => {
setItems(getCart());
}, [items]);
问题是在项目更改时传递[items]并调用useEffect。在useEffect中，您正在更改items。
确保每次返回
getItems()中的新对象或数组时都不知道您的对象是相同的，并一次又一次地调用效果。
解决方案
从依赖项中删除项目
useEffect(() => {
setItems(getCart());
}, []);
或者，如果您需要在更改当前状态时访问它：
useEffect(() => {
setItems(currentItems => getCart(currentItems));
}, []);
问题就在这里：
useEffect(() => {
setItems(getCart());
}, [items]);
您已使用items添加了一个依赖项。这意味着每当items发生变化时，都要运行setItems(getCart());
但当您设置项目时，这意味着项目会发生变化，从而再次触发useEffect，从而触发无限循环。
解决方案：
useEffect(() => {
setItems(getCart());
}, []);
删除依赖项。这意味着一旦组件是mounted，useEffect就会运行，并且只执行一次。如果出于不同的原因希望运行此操作，则需要将其添加到依赖数组中。
您应该在getCard Promis返回后调用setItems，或者您也可以使用回调而不是promis。
首先，您需要获取结果，然后调用setItems。它会解决你的问题。