自定义Hook useCart状态在Product组件中未定义问题及方案咨询

一、直接报错：cart未定义的原因 #

你的useCart里cart的初始状态是undefined，当调用addItem执行[...cart, productObj]时会报错——因为undefined不是数组，无法执行扩展操作。
修复方法：将cart初始状态设为空数组：

const [cart, setCart] = useState([]); // 替代原来的useState()

二、当前架构的核心问题 #

现在每个调用useCart的组件，都会创建独立的cart状态。比如Product组件里的cart和后续要做的购物车列表组件里的cart，是两个互不关联的状态，完全不符合购物车“全局共享”的需求。

三、正确共享购物车状态的两种方案 #

方案1：状态提升（适合组件层级较浅的场景） #

如果Product组件和购物车展示组件有共同父组件，把cart状态提升到父组件，通过props传递给子组件：

1. 在父组件（如App.js）中调用useCart：

import useCart from './Hooks/useCart';
import Product from './Components/Product/Product';
import Cart from './Components/Cart/Cart';

function App() {
  const {cart, addItem, removeItem} = useCart();
  return (
    <div>
      <Product addItem={addItem} />
      <Cart cart={cart} removeItem={removeItem} />
    </div>
  )
}

2. 修改Product组件接收props：

export default function Product({addItem}) {
  return (
    <>
      <article className="product-single">
        <h1>Fire sale !</h1>
        {Data.map(el => (
          <div key={el.id}> {/* 必须加唯一key */}
            <h2>{el.productName}</h2>
            <button onClick={() => addItem(el)}>Add</button>
          </div>
        ))}
      </article>
    </>
  )
}

方案2：Context API（适合跨多层组件共享的场景） #

当组件层级较深，props传递繁琐时，用Context实现全局状态共享：

步骤1：创建CartContext

在/Hooks/CartContext.js中：

import React, {createContext, useContext, useState} from 'react';

// 创建Context
const CartContext = createContext();

// 创建Provider组件，包裹需要共享状态的组件
export function CartProvider({children}) {
  const [cart, setCart] = useState([]);

  const addItem = (productObj) => {
    // 判断商品是否已存在，处理数量逻辑
    const exists = cart.find(item => item.id === productObj.id);
    if (exists) {
      setCart(cart.map(item => 
        item.id === productObj.id 
          ? {...item, quantity: (item.quantity || 1) + 1} 
          : item
      ));
    } else {
      setCart([...cart, {...productObj, quantity: 1}]);
    }
  };

  const removeItem = (productId) => {
    setCart(cart.filter(item => item.id !== productId));
  };

  // 提供给子组件的上下文值
  const contextValue = {
    cart,
    addItem,
    removeItem
  };

  return (
    <CartContext.Provider value={contextValue}>
      {children}
    </CartContext.Provider>
  );
}

// 自定义Hook，简化Context调用
export function useCartContext() {
  return useContext(CartContext);
}

步骤2：用CartProvider包裹根组件

在index.js或App.js中：

import {CartProvider} from './Hooks/CartContext';
import App from './App';

ReactDOM.render(
  <CartProvider>
    <App />
  </CartProvider>,
  document.getElementById('root')
);

步骤3：在Product组件中使用Context

修改Product.js：

import React from 'react';
import {useCartContext} from '../../Hooks/CartContext';
import Data from '../../local-json/products';

export default function Product() {
  const {addItem} = useCartContext();

  return (
    <>
      <article className="product-single">
        <h1>Fire sale !</h1>
        {Data.map(el => (
          <div key={el.id}>
            <h2>{el.productName}</h2>
            <button onClick={() => addItem(el)}>Add to Cart</button>
          </div>
        ))}
      </article>
    </>
  )
}

四、补充优化点 #

• 遍历列表必须加key属性，用商品唯一id（如el.id），不要用index。
• 购物车删除商品时，建议用商品唯一id判断，而非直接比较对象（对象是引用类型，内容相同也会判定不等）。

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