React中使用useContext+useState无法向数组添加数据的问题

报错Uncaught TypeError: e is not iterable的核心原因：

• Context未设置默认值：创建PdtList时未指定默认值，若Cake组件未被PdtList.Provider包裹，useContext(PdtList)会返回undefined，导致useState(undefined)初始化的状态为undefined，执行[...e]时因undefined不可迭代触发报错。
• 状态管理逻辑错误：Cart中的list是普通变量而非React状态，无法触发组件重渲染；且Cake组件自行维护独立状态，无法实现跨组件共享购物车数据。

1. 重构Cart组件的Context与状态管理 #

将购物车状态改为React状态维护，并通过Context传递状态和修改方法，同时给Context设置安全默认值：

import { createContext, useState } from "react"
import "./Cart.css"
import Cake from "../About Section/Cake";

// 设置Context默认值，避免未在Provider内时出现异常
const PdtList = createContext({
  cartItems: [],
  addToCart: () => {}
});

export default function Cart() {
    // 用useState维护购物车全局状态
    const [cartItems, setCartItems] = useState([]);

    // 统一管理添加商品的逻辑
    const addToCart = (product) => {
        setCartItems(prev => [...prev, product]);
    }

    return (
        <>
            <main className="align" >
                <h1>Thanks for shopping with us</h1>
                {/* 传递状态和操作方法到Context */}
                <PdtList.Provider value={{ cartItems, addToCart }}>
                    <Cake />
                </PdtList.Provider>
            </main>
        </>
    )
}
export { PdtList };

2. 修改Cake组件的逻辑实现 #

直接使用Context传递的方法操作购物车，无需自行维护状态：

import "./Product.css"
import { PdtList } from "../Cart/Cart";
import { useContext, useEffect } from "react";

export default function Cake(props) {
  const { name, images, bold, cut } = props;
  // 从Context获取购物车状态和添加方法
  const { cartItems, addToCart } = useContext(PdtList);

  const Add_Products = () => {
    const tobeAdded = { name, images, bold };
    // 调用全局的添加方法
    addToCart(tobeAdded);
  }

  useEffect(() => {
    console.log("当前购物车内容：", cartItems);
  }, [cartItems])

  return (
      <>
          <main className="align unique">
              <img src={images} alt="" />
              <h1>{name}</h1>
              <div className="align2">
                  <small>Rs {bold}</small>
                  <small style={{ "margin": "0px 10px" }} ></small>
                  <small style={{ "font-size": "15px", "textDecoration": "line-through" }} >Rs {cut}</small>
              </div>
              <button onClick={Add_Products} style={{ "margin": "10px 0px" }}>Add to Cart</button>
          </main>
      </>
  )
}

可选优化 #

• 防止重复添加商品：在addToCart方法中增加重复判断

const addToCart = (product) => {
  setCartItems(prev => {
    const isProductExist = prev.some(item => item.name === product.name);
    if (isProductExist) return prev;
    return [...prev, product];
  });
}

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