如何修复React的‘Too many re-renders’错误？解决购物车计数问题

错误原因 #

你这段代码的核心问题是直接在组件渲染阶段循环调用setCartCount：每次调用setState都会触发组件重新渲染，渲染时又会再次执行循环、调用setCartCount，反复触发更新，最终形成无限渲染循环，触发React的渲染次数限制报错。

修复方案 #

不要在渲染逻辑里多次调用setState，应该先完成数值累加计算，再一次性更新状态，同时把计算逻辑放到合适的执行时机：

1. 当cartItems是动态变化的props/状态时

用useEffect监听cartItems的变化，每次变化时计算总和并更新状态：

import { useState, useEffect } from 'react';

// 组件内部代码
const [cartCount, setCartCount] = useState(0);

useEffect(() => {
  // 用reduce快速累加所有cartItems中的数值
  const totalCount = Object.values(cartItems).reduce((sum, current) => sum + current, 0);
  setCartCount(totalCount);
}, [cartItems]); // 仅当cartItems变化时执行计算

2. 当cartItems是固定初始值时

直接在useState的初始化函数中计算初始总数，避免额外的effect监听：

import { useState } from 'react';

// 组件内部代码
const [cartCount, setCartCount] = useState(() => {
  // 初始化阶段计算总和，只执行一次
  return Object.values(cartItems).reduce((sum, current) => sum + current, 0);
});

额外注意点 #

你原来的循环逻辑存在潜在问题：用i从1到Object.keys(cartItems).length遍历，依赖cartItems的键是连续数字（1、2、3...），如果键是其他类型（比如商品ID字符串），会导致cartItems[i]取到undefined，计算结果错误。用Object.values(cartItems)直接获取所有值，能兼容任意键类型的对象。

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