React中使用setState追加对象属性仅保留最后一项的问题

你遇到的问题是因为React状态更新是异步且批量处理的，在map循环里每次调用setProductPrices时，引用的productPrices都是循环启动时的旧状态值，而非实时更新后的状态。所以每一次更新都是基于初始的旧状态添加单个键值对，后面的更新会直接覆盖前面的，最终只保留最后一次循环的结果。

正确写法 #

方式一：先转换数组为目标对象，再一次性更新

// 先把products数组转换成需要的对象结构
const newPrices = products.reduce((result, item) => {
  result[item.title] = item.unitPrice;
  return result;
}, {});
// 一次性更新状态
setProductPrices(newPrices);

方式二：基于原有状态合并（如果需要保留之前的productPrices内容）

setProductPrices(prevPrices => {
  return products.reduce((result, item) => {
    result[item.title] = item.unitPrice;
    return result;
  }, {...prevPrices}); // 复制原有状态，避免直接修改
});

为什么原代码无效 #

举个例子，假设products是[{title: 'first', unitPrice: 10}, {title: 'second', unitPrice: 15}]，初始productPrices是空对象：

• 第一次循环调用setProductPrices时，productPrices是空对象，生成的新对象是{first: 10}
• 第二次循环调用时，productPrices依然是空对象（因为状态还没来得及更新），生成的新对象是{second: 15}
• 最后状态批量更新，后一次的结果覆盖了前一次，所以最终只保留{second: 15}

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