React中使用useState更新数组内对象x、y属性的问题咨询

问题原因 #

• 你初始的data数组长度只有3，遍历生成的新数组长度也只会是3，无法得到预期的7条结果
• 代码中引用了未定义的newData变量，你实际存储x、y值的数组命名为x和y
• 连续调用两次setdata没有必要，单次遍历就能同时更新两个属性
• 你给出的y数组长度只有6，和x数组的7位长度不匹配，需要补齐为7位才能匹配预期结果

修复后的代码 #

const [data, setdata] = useState([
    { x: 1, y: 2 },
    { x: 1, y: 2 },
    { x: 1, y: 2 },
]);

const x = [3, 4, 5, 6, 7, 8, 9];
// 补齐y数组的缺失值5，保证和x长度一致
const y = [1, 2, 3, 4, 5, 6, 7];

const updateData = () => {
  // 直接以更长的x数组长度为基准生成新数组，不需要依赖原来的data长度
  setdata(x.map((xVal, i) => ({
    x: xVal,
    y: y[i]
  })));
};

如果你需要保留原data中除了x、y之外的其他属性，可以使用下面的写法：

const updateData = () => {
  setdata(x.map((xVal, i) => ({
    // 原data对应索引有值就展开，没有就用空对象兜底
    ...(data[i] || {}),
    x: xVal,
    y: y[i]
  })));
};

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