React购物车添加函数首次正常，后续出现undefined与NaN问题

你的问题核心在于直接依赖当前cart状态进行更新，React的useState更新是异步批量处理的，连续调用addToCart时，后续调用可能拿到的还是旧的cart值，导致状态更新逻辑出错。另外还需要确保数量计算时的类型正确，避免非数字值相加产生NaN。

修复方案： #

• 使用setCart的函数式更新，每次基于最新的前一个状态进行修改，而非依赖当前渲染周期的cart变量。
• 强制转换数量为数字类型，防止字符串拼接或非数字值导致NaN。

修改后的代码：

const [cart, setCart] = React.useState([])

const addToCart = (data) => {
    setCart(prevCart => {
        const index = prevCart.findIndex(ele => ele.product.data.id === data.product.data.id)
        if (index !== -1) {
            // 复制原数组，避免直接修改状态
            const temp = [...prevCart]
            // 确保数量是数字类型后相加
            const newQuantity = Number(data.quantity.value) + Number(temp[index].quantity.value)
            temp[index] = { ...temp[index], quantity: { value: newQuantity } }
            return temp
        } else {
            // 新商品加入购物车，提前确保quantity.value是数字类型
            return [...prevCart, {
                ...data,
                quantity: { value: Number(data.quantity.value) }
            }]
        }
    })
}

关键说明： #

1. 函数式更新：setCart(prevCart => {...})中prevCart是React保证的最新状态值，不会出现异步状态滞后的问题，彻底解决多次连续调用时的状态不一致。
2. 类型安全：用Number()包裹数量值，确保即使传入的是字符串类型的数字（比如表单输入的字符串），也能正确转换为数字进行加法运算，避免NaN。
3. 状态不可变性：始终通过复制数组/对象的方式修改状态，不直接修改prevCart或原数组元素，符合React状态更新的不可变原则。

额外建议：确保传入的data.quantity.value本身是有效的数字（或可转换为数字的字符串），如果后端返回或前端传入的值是null/undefined，也会导致NaN，建议在传入addToCart前做一次校验。

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