如何正确将元素数组按索引追加到React对象数组中

你写的逻辑存在两个核心错误：

• 每次for循环迭代时，都对整个B数组执行map遍历，并且将返回结果整体赋值覆盖给newArray，前一次循环生成的内容会被后一次完全替换
• 循环结束时只保留了最后一次迭代（也就是k=1，对应A的最后一个元素）的map结果，自然所有元素都是基于A的最后一项生成的。

不需要嵌套循环，直接按索引对齐两个数组的元素即可，给两种常用实现：

方法1：保留for循环写法 #

只需要在循环时按相同索引取B的对应元素，追加到新数组即可，不要覆盖整个newArray：

var newArray = [];
for (let k = 0; k < A.length; k++) {
  newArray.push({
    ...A[k],
    score: String(B[k]) // 不需要字符串类型的话直接写B[k]即可
  });
}
return newArray;

方法2：更简洁的map写法 #

直接遍历A数组，通过回调的索引参数取B中对应位置的元素，不需要额外声明循环变量和空数组：

var newArray = A.map((item, index) => ({
  ...item,
  score: String(B[index])
}));
return newArray;

提示：如果A和B数组长度不一致，上述代码会给超出B长度的A项赋值score: undefined，有需要可以自行加边界判断。

执行后就能得到你预期的结果：

[
  {id: 1, name: "han", score: "100"},
  {id: 2, name: "mohd", score: "200"}
]

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