React使用useState时如何按新数组长度补全对象数组并更新x属性

问题原因 #

你当前的实现是基于原有data数组的长度做遍历，原数组只有3个元素，map方法执行后只会返回长度为3的新数组，自然无法覆盖newData的全部7个值。

修复方案 #

直接以newData的长度为基准生成最终数组，对应索引存在原数组元素时复用原有属性，不存在时取默认的属性值即可：

const updateX = () => {
  setdata(newData.map((xVal, index) => {
    // 优先复用原数组对应索引的元素，无则使用默认结构
    const currentItem = data[index] ?? { y: 2 }
    return { ...currentItem, x: xVal }
  }))
}

说明 #

如果你的data数组里的y值不是固定值，这个写法也可以保留原有每个元素的y值，只替换x字段，同时补充超出原数组长度的新元素。

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