javascript - 错误 "Maximum update depth exceeded. This can happen when a component calls setState inside useEffect"

Question

每当调用我的购物车组件(如下所示)时，我都会遇到此错误(重复数千次直到页面崩溃):

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 就会更改页面，并且当依赖数组中有任何项目时，它将基于此。
嗯，我不知道为什么会发生这个错误。
我真的试着理解这个错误当组件在useEffect中调用setState时可能发生，但是useEffect要么没有依赖数组，要么每个渲染上的依赖项之一发生变化，这是我到目前为止学到的试图解决这个问题:

1. items 依赖项没有太大变化。测试添加 1 项或 0 项会导致数千个相同的错误
2. 删除 useEffect 会完全停止错误但会破坏将其绑定(bind)到 items 状态变量的目的

我怎样才能停止这个错误？

我只是希望这个组件在渲染时不会卡住和抛出数千个这样的错误。

Answer 1

原因在于您的 useEffect 依赖项:

useEffect(() => {
  setItems(getCart());
}, [items]);

问题是您正在传递 [items] 并在项目更改时调用 useEffect。在 useEffect 中，您正在更改 items。

Make sure if you return each time new object or array from getItems() react don't know that your objects are the same and calling effect again and again.

解决方案

从依赖项中删除项目

useEffect(() => {
  setItems(getCart());
}, []);

或者如果您需要在更改当前状态时访问它:

useEffect(() => {
  setItems(currentItems => getCart(currentItems));
}, []);