如何更新React状态中对象数组指定索引的元素？

你代码里的问题是在对象字面量中直接使用x[0]作为键名，这是无效的JavaScript语法。要在保留其他状态的前提下更新数组指定索引的元素，必须遵循React的不可变更新原则——不能直接修改原状态对象或数组，而是生成新的副本进行修改。

方法一：使用map生成新数组 #

通过map遍历原数组，替换目标索引的元素，其余元素保持不变：

const [points, setPoints] = useState({"x": [46, 168, 292, 415, 537, 660] , "y":[60, 192, 324, 454]});

const update = (e) => {
  setPoints(prevPoints => ({
    ...prevPoints, // 保留原对象的其他属性（比如y数组）
    x: prevPoints.x.map((val, idx) => idx === 0 ? e : val)
  }));
};

方法二：复制数组后直接修改 #

先通过扩展运算符复制原数组，再修改指定索引的值：

const [points, setPoints] = useState({"x": [46, 168, 292, 415, 537, 660] , "y":[60, 192, 324, 454]});

const update = (e) => {
  setPoints(prevPoints => {
    // 复制原x数组，避免修改原状态
    const newX = [...prevPoints.x];
    newX[0] = e;
    return {
      ...prevPoints,
      x: newX
    };
  });
};

两种方式都能正确更新目标元素，同时保留其他状态的原有值，确保组件能正常触发重渲染。

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