React中useState的setCart函数调用报错，如何正确更新cart状态？

错误原因分析 #

你写的setCart(...cart, item)写法有误：setCart需要接收一个完整的数组作为新状态，但你直接展开了cart的元素，相当于把数组的每个元素单独传给setCart，这不符合状态更新的要求，所以会抛出“object is not iterable”的错误。

另外，直接用cart.push(item)修改原数组的方式也不对：虽然控制台能看到数组内容变化，但React的状态更新依赖不可变值，直接修改原数组不会触发组件重新渲染，UI不会同步更新，属于无效的状态更新。

正确的状态更新写法 #

1. 基础写法（创建新数组）

通过数组展开运算符生成新数组，把原购物车的所有元素和新商品一起放入新数组，再传给setCart：

const [cart, setCart] = useState([]);

const addToCart = (item) => {
  setCart([...cart, item]);
};

2. 函数式更新（推荐用于依赖旧状态的场景）

当新状态需要基于最新的旧状态生成时，用函数式更新更可靠，React会自动传入当前最新的状态值：

const [cart, setCart] = useState([]);

const addToCart = (item) => {
  setCart(prevCart => [...prevCart, item]);
};

关于console.log的注意点 #

setCart是异步操作，直接在setCart后打印cart会输出更新前的旧值。如果要查看更新后的状态，可以用useEffect监听cart的变化：

import { useEffect, useState } from 'react';

const [cart, setCart] = useState([]);

const addToCart = (item) => {
  setCart(prevCart => [...prevCart, item]);
};

useEffect(() => {
  console.log('更新后的购物车：', cart);
}, [cart]); // 当cart变化时执行回调

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