使用Redux Toolkit编写addToCart函数时对象属性返回undefined

你遇到的问题核心有两个原因：

1. 异步加载的时机问题：组件首次渲染时，useFetch还没完成请求，foods是初始空值（undefined/null），此时data的初始值也是空的。你看到console.log(data)有数据，是因为浏览器控制台会实时更新对象引用，展开时请求已经完成，但打印的那一刻data其实还是空值，所以data.name返回undefined。
2. 数据结构不匹配：如果接口http://localhost:8000/foods返回的是食物数组而非单个对象，那data是数组类型，直接访问data.name自然不存在。

解决方案1：处理异步加载的空值边界 #

在访问data属性前先做存在性判断，避免初始渲染报错：

const {data:foods,isPending,error} = useFetch('http://localhost:8000/foods')
const dispatch = useDispatch();

// 打印时增加判断
console.log(foods)
console.log(foods?.name || '数据未加载')

const addToCart = () => {
    if (!foods) return; // 数据未加载时不执行操作
    dispatch(
        cartActions.addToCart({
            name : foods.name,
            id: foods.id,
            price: foods.price,
        })
    )
} 

另外你完全不需要额外的useState和useEffect同步foods，直接用useFetch返回的foods即可，减少不必要的状态层。

解决方案2：适配数组类型的接口返回 #

如果接口返回的是食物列表数组（比如[{id:1, name:'汉堡', price:20}, ...]），需要明确要加入购物车的具体食物，通常是遍历列表给每个食物绑定独立的添加事件：

const {data:foods,isPending,error} = useFetch('http://localhost:8000/foods')
const dispatch = useDispatch();

// 假设你要渲染食物列表
return (
  <div>
    {isPending && <p>加载中...</p>}
    {error && <p>{error}</p>}
    {foods?.map(food => (
      <div key={food.id} className="food-item">
        <h3>{food.name}</h3>
        <p>¥{food.price}</p>
        <button onClick={() => dispatch(cartActions.addToCart(food))}>加入购物车</button>
      </div>
    ))}
  </div>
)

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