React中setProducts无法更新状态，如何合并旧值与新元素？

你的问题出在直接依赖当前products状态构建新数组，但React状态更新是异步的，当代码执行时，products可能还是初始值，导致新状态没有正确合并最新数据。

正确的解决方案：使用函数式更新 #

React的useState返回的更新函数支持传入一个函数，这个函数会接收当前最新的状态值作为参数，你可以基于这个最新值构建新状态，确保每次更新都用的是最新数据。

修改后的代码：

// 替换原来的update变量和setProducts调用
setProducts(prevProducts => [
  // 展开旧状态的所有元素
  ...prevProducts,
  // 添加新元素
  {
    id: product.id, // 确保product变量在当前作用域有效
    name: "aaa",
    imageUrl: require("./test.png"),
    price: 2599,
    options: [
      { option: 'option1', checked: check1 },
      { option: 'option2', checked: check2 },
      { option: 'option3', checked: false },
      { option: 'option4', checked: false }
    ],
    category: "art2",
    amtstars: amtString
  }
]);

额外注意事项 #

• 确保product.id、check1、check2、amtString这些变量在当前代码作用域中已经正确定义，否则会引发未定义错误。
• 如果你的需求是替换已有id的元素（而非追加），可以用map方法替换对应项：

  setProducts(prevProducts => prevProducts.map(item => 
    item.id === product.id 
      ? { /* 新元素的属性 */ } 
      : item
  ));
  

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