React中基于Context API的加入购物车功能失效问题排查

Let's break down why your cart items aren't updating even though the showHideCart state works. Here are the most likely fixes to check step by step:

1. Verify Action Type Spelling (Most Common Culprit) #

Double-check that your ADD_TO_CART action type is spelled exactly the same across all files:

• In Types.js, confirm the export is:

  export const ADD_TO_CART = 'ADD_TO_CART';
  

• In CartReducer.js, the case matches exactly:

  case ADD_TO_CART: { ... }
  

• In CartState.js, the dispatch uses the correct imported type:

  dispatch({type: ADD_TO_CART, payload: item})
  

A tiny typo (like ADD_TO_CART_ or AddToCart) will cause the reducer to ignore the action and return the original state—this explains why only SHOW_HIDE_CART works (since that type is correctly matched).

2. Confirm the ADD_TO_CART Action Is Being Triggered #

Add a console log inside the ADD_TO_CART case in your reducer to see if the action is even reaching it:

case ADD_TO_CART: {
  console.log('Adding item to cart:', action.payload);
  return {
    ...state,
    cartItems: [...state.cartItems, action.payload],
  }
}

• If you don't see this log when clicking "Add To Basket":
  • Check if your Product component is actually receiving the addToCart function from context. Add this log in the Product component:

    const {addToCart } = useContext(CartContext)
    console.log('addToCart function:', addToCart); // Should log a function, not undefined
    

  • Ensure your CartState Provider wraps all components that need access to the cart context (including ProductDetailsPage and Product). Your app root should look something like this:

    function App() {
      return (
        <CartState>
          <ProductDetailsPage />
        </CartState>
      );
    }
    

• If you do see the log but cartItems still doesn't update:
  • Make sure you're returning a new state object in the reducer. Your current code uses ...state correctly to preserve existing state, and [...state.cartItems, action.payload] creates a new array—this is the right approach, so double-check that you're not accidentally mutating the original state anywhere else.

3. Check React DevTools for State Changes #

Open React DevTools and locate the CartState component. After clicking "Add To Basket":

• If the cartItems array in the state does update but your UI doesn't reflect it, the issue is in how you're rendering the cart items (make sure you're using state.cartItems from context and not a local state variable).
• If cartItems stays empty, the reducer isn't processing the action—go back to step 1 to confirm action type spelling.

Quick Sanity Check #

Your reducer logic for ADD_TO_CART looks correct, and the addToCart function in CartState is properly dispatching the action. The most likely issue is a mismatched action type or a context scope problem.

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