React组件出现Maximum update depth exceeded错误的解决求助

问题根源 #

你的代码触发无限循环的原因有两个：

• useEffect未设置依赖数组，导致每次组件渲染都会执行setTotalPrice，而状态更新又会触发组件重新渲染，往复形成无限循环。
• 若把costOfItems加入依赖数组，由于它是组件内部定义的函数，每次渲染都会生成新的函数引用，useEffect会因依赖变化反复执行，依然触发循环。

另外，总价属于checkoutProducts的派生值，完全不需要用useState单独维护——直接基于源数据计算即可，额外维护状态反而容易引发同步问题。

方案1：直接在渲染时计算（最简实现） #

直接在JSX中调用计算函数，无需额外状态：

const CheckoutComponent = () => {
    const { checkoutProducts } = useSelector((state)=> state?.allCartProducts);

    const calculateTotal = ()=> {
        return checkoutProducts?.reduce((total, product) => {
            return total + (product?.price || 0) * (product?.quantity || 0);
        }, 0) || 0;
    }

    return (
        <h1>The total amount is {calculateTotal()}</h1>
    )
}

这里用reduce替代map更贴合求和场景，同时增加空值兜底，避免undefined参与计算导致异常。

方案2：用useMemo缓存计算结果（性能优化） #

如果checkoutProducts数据量大或组件频繁渲染，用useMemo缓存计算结果，避免重复计算：

const CheckoutComponent = () => {
    const { checkoutProducts } = useSelector((state)=> state?.allCartProducts);

    const totalPrice = useMemo(() => {
        return checkoutProducts?.reduce((total, product) => {
            return total + (product?.price || 0) * (product?.quantity || 0);
        }, 0) || 0;
    }, [checkoutProducts]); // 仅当checkoutProducts变化时重新计算

    return (
        <h1>The total amount is {totalPrice}</h1>
    )
}

useMemo的依赖数组设为checkoutProducts，完美匹配你「挂载时或内容变化时自动计算」的需求，同时避免不必要的重复计算。

原方案不可行的核心原因 #

你试图用useEffect同步派生状态的思路本身有问题——派生值不需要单独维护状态，直接基于源数据计算即可，强行同步状态只会引发无限循环这类异常。

内容的提问来源于stack exchange，提问作者Liti