React删除购物车商品后页面未触发重渲染问题求解

• 组件职责错位：单个购物车商品组件CartItem冗余维护了整份购物车列表的本地状态，删除操作后只操作了本地状态，没有同步更新全局Context的购物车数据源。
• 状态更新逻辑错误：删除商品后没有同步最新购物车数据到全局状态，只是把旧的line_items重复赋值给本地状态，状态引用未发生变化，无法触发重渲染。
• 无效副作用：useEffect依赖设置为[cartItems]，每次本地状态变化就重复执行赋值逻辑，存在死循环风险，且完全没有实际作用。
• Context初始值不合理：line_items初始值设为[{}]，会导致渲染出无数据的空商品占位块。

1. 移除CartItem组件内冗余的本地cartItems状态、cartOnLoad方法和对应的无效useEffect，单个商品组件只负责接收item属性渲染自身、触发删除操作即可。
2. 删除商品时，直接使用commerce.cart.remove接口返回的最新购物车数据，调用Context暴露的setCart方法更新全局状态，全局状态变更后所有消费Context的组件会自动触发重渲染。
3. 优化Context代码，缓存dispatch上下文value避免不必要的重渲染，修正line_items初始值为空数组。
4. 购物车列表父组件直接从useCartState()读取line_items做遍历渲染即可，全局状态更新后line_items会自动过滤掉已删除的商品，无需手动操作列表。

CartItem 组件 #

import { XIcon } from '@heroicons/react/outline' // 替换为你项目实际的图标导入路径
import { commerce } from '../../lib/commerce'
import { useCartDispatch } from '../context/cart' // 替换为你项目实际的Context路径

const CartItem = ({item}) => {   
  const { setCart } = useCartDispatch()

  const removeItem = async () => {
    // 接口返回删除操作后的完整最新购物车数据
    const updatedCart = await commerce.cart.remove(item.id)
    // 同步更新全局购物车状态，自动触发关联组件重渲染
    setCart(updatedCart)
  }

  if(!item.line_total) return <p>Loading...</p>

  return (
    <div className="border-t border-b border-gray-200 divide-y divide-gray-200">
      <div className="flex py-6 sm:py-10">
        <div className="flex-shrink-0">
          <img
            src={item.image.url}
            alt={item.name}
            className="w-24 h-32 rounded-md object-center object-cover sm:w-48 sm:h-64"
          />
        </div>    

        <div className="ml-4 flex-1 flex flex-col justify-between sm:ml-6">
          <div className="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
            <div>
              <div className="flex justify-between">
                <h3 className="text-sm">
                  <a href="#" className="font-medium text-gray-700 hover:text-gray-800">
                    {item.name}
                  </a>
                </h3>
              </div>
              <p className="mt-1 text-sm font-medium text-gray-900">{item.price.formatted_with_symbol}</p>
            </div>

            <div className="absolute top-0 right-0">
              <button 
                type="button" 
                className="-m-2 p-2 inline-flex text-gray-400 hover:text-gray-500" 
                onClick={removeItem}
              >
                <span className="sr-only">Remove</span>
                <XIcon className="h-5 w-5" aria-hidden="true" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CartItem

Cart Context 代码 #

import {createContext, useEffect, useContext, useReducer, 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 = (payload) => dispatch({type: SET_CART, payload})

    useEffect(() => {
        const getCart = async() => {
            try {
                const cart = await commerce.cart.retrieve()
                setCart(cart)
            } catch (error){
                console.log("获取购物车失败", error)
            }
        }
        getCart()
    },[]) 

    // 缓存dispatch上下文value，避免每次渲染生成新对象导致不必要重渲染
    const dispatchValue = useMemo(() => ({setCart}), [])

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

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

购物车列表页使用示例 #

import { useCartState } from '../context/cart'
import CartItem from './CartItem'

const CartPage = () => {
  const { line_items } = useCartState()
  return (
    <div className="cart-list">
      {line_items.map(item => <CartItem key={item.id} item={item} />)}
    </div>
  )
}
export default CartPage

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