Next.js 13购物车Content Provider重复渲染致addToCart多次执行问题

核心原因 #

你遇到的updateCart回调执行两次的问题，是React严格模式的正常行为：在开发环境下，严格模式会刻意双重执行状态更新器的回调函数（以及useEffect、useReducer等副作用相关逻辑），目的是帮你提前发现那些依赖执行次数的潜在bug。生产环境下不会有这个行为，因此只要你的状态更新逻辑是纯函数，就不会影响最终结果。

你目前的代码中，updateCart的回调没有返回新状态（示例里是空逻辑），且直接修改cartState对象的行为会导致状态不稳定，这才是数量计算错误的根本原因。

解决方案 #

1. 确保状态更新是纯函数 #

状态更新的回调必须是纯函数：不能有副作用，必须基于prev状态返回全新的状态对象/数组，不能依赖外部变量或执行次数。这样即使被严格模式执行多次，结果也完全一致，不会出现数量错误。

修正后的addToCart逻辑示例：

function addToCart({ id, item_title, item_price }) {
  console.log("addToCart function hit")
  updateCart((prev) => {
    // 检查商品是否已存在于购物车
    const existingItem = prev.find(item => item.id === id);
    if (existingItem) {
      // 数量+1，返回新数组（禁止修改原prev数组）
      return prev.map(item => 
        item.id === id ? {...item, quantity: item.quantity + 1} : item
      );
    } else {
      // 添加新商品到购物车
      return [...prev, { id, item_title, item_price, quantity: 1 }];
    }
  })
}

2. 修正Context状态的管理方式 #

你在RootLayout中直接修改cartState.restrict = false的行为是错误的——这会直接修改useCartState返回的对象，导致状态不稳定，触发不必要的重渲染。应该用React状态来管理restrict变量：

修改test-cart.js：

"use client"
import { useState, createContext, useContext } from 'react';

export const CartContext = createContext();

// 假设你有默认购物车初始值
const defaultCart = [];

export function useCartState() {
  const [cart, updateCart] = useState(defaultCart);
  // 用useState管理restrict，而不是直接赋值
  const [restrict, setRestrict] = useState(false);

  function addToCart({ id, item_title, item_price }) {
    console.log("addToCart function hit")
    updateCart((prev) => {
      const existingItem = prev.find(item => item.id === id);
      if (existingItem) {
        return prev.map(item => 
          item.id === id ? {...item, quantity: item.quantity + 1} : item
        );
      } else {
        return [...prev, { id, item_title, item_price, quantity: 1 }];
      }
    })
  }

  return {
    addToCart,
    cart,
    restrict,
    setRestrict // 提供修改restrict的方法（如果需要的话）
  }
}

export function useCart() {
  const cart = useContext(CartContext);
  return cart;
}

修改RootLayout.tsx，移除直接修改cartState的代码：

"use client"

import './globals.css'
import { CountryCodeProvider } from '../context/countrycode';
import { CartContext, useCartState } from '../hooks/test-cart.js';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const cartState = useCartState();

  return (
    <html lang="en">
      <body>
        <main>
          <CountryCodeProvider>
            <CartContext.Provider value={cartState}>
              {children}
            </CartContext.Provider>
          </CountryCodeProvider>
        </main>
      </body>
    </html>
  )
}

3. 接受严格模式的开发行为 #

严格模式的双重执行只存在于开发环境，是帮你排查bug的工具。只要你的状态更新逻辑是纯函数，开发环境的重复执行不会影响最终状态，也不需要关闭严格模式。

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