React useState更新数组对象报错：Cannot find name 'shoppinglist'

错误原因 #

你收到Cannot find name 'shoppinglist'错误，是因为shoppinglist并非独立变量，它是formData对象下的属性名，直接在计算属性里引用会被TS识别为未定义的变量。同时你的状态更新逻辑完全错误——你试图把数组项当作新的属性名来赋值，这会覆盖整个formData的结构，而非更新数组内的指定项。

正确的状态更新方式 #

React要求状态更新必须保持不可变性，所以需要先复制原数组和目标对象，再修改对应属性后替换回原状态。推荐使用函数式更新（能获取最新的前序状态，避免闭包陷阱）：

方法一：数组拷贝+对象拷贝

setFormData(prevFormData => {
  // 浅拷贝原购物车数组，避免直接修改原状态
  const updatedShoppingList = [...prevFormData.shoppinglist];
  // 拷贝目标项并更新qty属性
  updatedShoppingList[productIndex] = {
    ...updatedShoppingList[productIndex],
    qty: qtyValue
  };
  // 返回新的formData对象，保留其他属性
  return {
    ...prevFormData,
    shoppinglist: updatedShoppingList
  };
});

方法二：用数组map简化写法

如果数组项较多，也可以用map遍历生成新数组，仅修改指定索引的项：

setFormData(prevFormData => ({
  ...prevFormData,
  shoppinglist: prevFormData.shoppinglist.map((item, index) => 
    index === productIndex ? { ...item, qty: qtyValue } : item
  )
}));

为什么原来的写法不对 #

你原代码中的[shoppinglist[productIndex]]存在两个问题：

1. shoppinglist未定义，必须通过formData.shoppinglist访问，但就算改成['shoppinglist']，也只是指定要更新的属性名是shoppinglist；
2. 直接赋值{ qty: qtyValue }会把整个shoppinglist数组替换成这个单独的对象，完全破坏了原有的数组结构。

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