React购物车map内setState触发无限重渲染/死循环问题求助

问题原因 #

• 重渲染死循环：setState会触发组件重新渲染，你在渲染阶段执行的map遍历里反复调用setCartQuantity，会进入「渲染→调用setState→再次渲染→再次调用setState」的无限循环，触发报错。
• 累加值外部读取为0：不是作用域问题，由两个原因导致：
  1. 你在displayCartItems函数开头就执行了setCartQuantity(cartItemsTotal)，此时还未进入遍历累加逻辑，cartItemsTotal还是初始值0
  2. cartTotal、vat、cartItemsTotal都是组件顶层声明的普通变量，每次组件重渲染都会被重新初始化为0，遍历过程中修改的值仅在当前渲染的执行上下文中生效，下一次渲染就会被重置。

解决方法 #

把「计算总数量、总金额、税费」和「渲染购物车条目」的逻辑拆分，不要在渲染过程中修改状态或累加值。汇总值不需要用state存储，直接计算后渲染即可，还可以用useMemo缓存计算结果优化性能。
优化后代码如下：

const CartIconSummary = ({data}) => {
  const deleteCart = useCartDelete()
  const cart = useCart()

  // 提前计算所有汇总值和待渲染条目，依赖变化时才重新计算
  const { cartItemsTotal, cartTotal, vat, cartItems } = useMemo(() => {
    let totalCount = 0
    let totalAmount = 0
    let totalVat = 0
    let items = []

    if (!cart || !data) {
      return {
        cartItemsTotal: 0,
        cartTotal: 0,
        vat: 0,
        cartItems: []
      }
    }

    cart.forEach((cartItem, index) => {
      // 用find代替内层map，匹配到对应商品就停止遍历，性能更优
      const matchedData = data.find(dataItem => dataItem.id === cartItem.id)
      if (matchedData) {
        const itemAmount = matchedData.price * cartItem.quantity
        totalAmount += itemAmount
        totalVat += itemAmount * 0.23
        totalCount += cartItem.quantity
        items.push(
          <div key={cartItem.id || index} className={`${className}CartItemContainer`}>
            <div className={`${className}ImageContainer`}> 
              <img className={`${className}Image`} src={`${process.env.PUBLIC_URL}${matchedData.cartImage.slice(1)}`} alt="cart-item-preview"/>
            </div>
            <div className={`${className}CartItemNamePriceContainer`}> 
              <div className={`${className}CartItemName`}> 
                {matchedData.shortName}
              </div>
              <div className={`${className}CartItemPrice`}>
                ${matchedData.price}
              </div>
            </div>
            <div className={`${className}CartItemQuantity`}> 
              x {cartItem.quantity}
            </div>
          </div>
        )
      }
    })

    // 处理税费保留两位小数
    totalVat = Number(totalVat.toFixed(2))
    return {
      cartItemsTotal: totalCount,
      cartTotal: totalAmount,
      vat: totalVat,
      cartItems: items
    }
  }, [cart, data])

  return (
    <>
      <div className={`${className}CartDeleteContainer`}> 
        <div className={`${className}CartQuantity`}> CART({cartItemsTotal}) </div>
        <div className={`${className}CartDelete`} onClick={() => deleteCart([])}> Remove all </div>
      </div>
      {cartItems}
    </>
  )
}

额外优化提示 #

• 原逻辑用双层map匹配商品ID，每次都会遍历整个data数组，替换为find方法匹配到对应商品就终止遍历，可大幅减少不必要的循环次数
• 如果购物车条目存在插入、删除、排序操作，建议将渲染条目的key替换为唯一商品ID，不要用遍历索引index，避免出现渲染异常

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