React中如何以变量值为属性名修改状态中的数组元素？

云原生阿岚

2026-5-21

解决React中修改状态数组指定索引元素的问题

嘿，我完全懂你碰到的这个坑！你之前的写法之所以不生效，是因为两个关键问题：一是你把数组类型的property改成了对象（{ index: value }），直接改变了状态的类型；二是对象字面量里的index会被当作字符串键名，而不是你传入的数字变量值，所以根本没修改到目标位置的数组元素。

下面给你几种正确的实现方式，都遵循React状态不可变的原则：

方法一：展开运算符+直接修改新数组（最直观）

这种方法先复制原数组，再修改指定索引的元素，最后更新状态：

this.setState(prevState => {
  // 用展开运算符创建原数组的浅拷贝
  const updatedProperty = [...prevState.property];
  // 修改目标索引的元素
  updatedProperty[index] = value;
  // 返回新的状态对象
  return { property: updatedProperty };
});

这里用函数式的setState（接收prevState参数）是因为状态更新可能是异步的，这样能确保我们基于最新的状态来修改，避免旧状态覆盖的问题。

方法二：使用数组map方法（适合复杂场景）

如果你的数组元素是更复杂的对象，或者需要更灵活的条件判断，用map方法返回新数组会更优雅：

this.setState(prevState => ({
  property: prevState.property.map((item, i) => {
    // 当遍历到目标索引时，替换成新值，否则保持原元素
    return i === index ? value : item;
  })
}));

map方法会返回一个全新的数组，不会修改原状态数组，完美符合React的不可变要求。