React/Next.js购物车页面无限循环渲染问题排查与修复

无限重渲染完全由CartProvider里的两处逻辑错误导致，和CartContainer组件无关：

• 核心死循环点：拉取购物车数据的useEffect错误地将state加入依赖数组，effect执行时调用setCart更新state -> state变更触发effect重跑 -> 再次更新state，形成闭环死循环。
• 额外性能问题：CartDispatchContext.Provider的传值直接写为{{setCart}}，每次Provider重渲染都会生成全新的对象引用，所有消费该上下文的组件都会被强制重渲染，放大循环问题。
• 附带的小bug：初始state结构错误，subtotal定义为空数组、line_items定义为[{}]，会导致首次渲染时取值报错、空购物车判断失效。

1. 修改购物车拉取逻辑的useEffect依赖，仅在组件首次挂载时执行一次拉取，后续需要刷新购物车时，在增删改商品的操作逻辑里手动调用拉取方法，禁止监听全量state自动触发拉取。
2. 用useCallback缓存上下文中暴露的方法，用useMemo缓存传给Provider的value对象，避免无意义的引用变更导致的重渲染。
3. 修正初始state的结构，匹配接口返回的数据格式。

修复后的完整CartProvider代码如下：

import {createContext, useEffect, useContext, useReducer, useCallback, useMemo} from 'react'
import {commerce} from '../../lib/commerce'

const CartStateContext = createContext()
const CartDispatchContext = createContext()

const SET_CART = "SET_CART"

const initialState = {
    total_items: 0,
    total_unique_items: 0,
    subtotal: {},
    line_items: []
}


const reducer = (state,action) => {
    switch(action.type){
        case SET_CART:
            return { ...state, ...action.payload }
        default: 
            throw new Error(`Unknown action: ${action.type}` )
    }
}

export const CartProvider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, initialState)
    
    const setCart = useCallback((payload) => {
        dispatch({type: SET_CART, payload})
    }, [])

    const getCart = useCallback(async() => {
        try {
            const cart = await commerce.cart.retrieve()
            setCart(cart)
        } catch (error){
            console.log("fetch cart error", error)
        }
    }, [setCart])

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

    const dispatchValue = useMemo(() => ({setCart, getCart}), [setCart, getCart])

    return (
        <CartDispatchContext.Provider value={dispatchValue}>
        <CartStateContext.Provider value={state}>
            {children}
        </CartStateContext.Provider>
        </CartDispatchContext.Provider>
    )
}

export const useCartState = () => useContext(CartStateContext)
export const useCartDispatch = () => useContext(CartDispatchContext)

• CartPage中定义的getPaymentAPIStatus未被任何逻辑调用，属于冗余代码可直接删除。
• 后续实现购物车增删改操作时，操作成功后直接从useCartDispatch中取出getCart方法调用刷新数据即可，不要新增监听state的effect做自动同步，避免再次引入循环渲染问题。

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