React中循环生成指定键值对对象无结果，求解决方法

你尝试将数组转换为以name为键、key为值的对象，但使用for循环调用setNewObject后未得到预期结果。原代码如下：

const arr = [
  {
    name: 'ab',
    key: '584577',
  },
  {
    name: 'cd',
    key: '344926',
  },
  {
    name: 'ef',
    key: '804816',
  },
];

for(const item of arr) {
  setNewObject({...newObject, [item.name]: item.key})
}

问题原因 #

React的状态更新是异步批量处理的，在循环中每次调用setNewObject时，你引用的newObject都是组件当前渲染周期的初始状态值（而非实时更新后的状态）。这导致每次更新都是基于同一个初始对象展开，前面的键值对会被后续的覆盖，最终只保留最后一次循环的结果，甚至可能因为批量更新机制导致最终状态不符合预期。

解决方案 #

方案1：先转换对象再一次性更新（推荐）

使用数组的reduce方法先将数组转换为目标对象，再调用状态更新函数一次，避免多次异步更新的问题：

const targetObj = arr.reduce((result, item) => {
  result[item.name] = item.key;
  return result;
}, {});

setNewObject(targetObj);

方案2：使用函数式状态更新

如果需要保留循环的方式，使用React的函数式更新，它会接收当前最新的状态作为参数，确保每次更新都基于上一次的最新状态：

for(const item of arr) {
  setNewObject(prevState => ({...prevState, [item.name]: item.key}));
}

预期结果 #

两种方案都能得到你想要的对象：

{
  ab: '584577',
  cd: '344926',
  ef: '804816'
}

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