React Native更新State数组单个值遇语法错误，求正确实现方案

嘿，我一眼就瞅出你代码里的问题啦！你写的this.setState({ array[2]: 'something' });是语法错误的根源——对象字面量里不能直接用array[2]这种形式当键名，而且React的State是不可直接修改的，尤其是数组这种引用类型，得用正确的姿势来更新。

为什么你的写法不对？ #

React的setState接收的是一个对象，对象里的键对应State的属性名，值是该属性的新值。你想直接修改数组的第三个元素，但array[2]并不是一个有效的对象键名写法，哪怕用ES6的计算属性{ ['array[2]']: 'something' }也没用，这只会给State新增一个叫array[2]的属性，根本不会修改原数组里的元素。

而且更重要的是：永远不要直接修改this.state里的数组或对象，因为React依赖State的引用变化来触发组件重新渲染，直接修改原数组的话，State的引用没改变，React可能不会更新视图，还会导致难以追踪的bug。

正确的做法：创建数组副本再更新 #

你需要先创建原数组的副本，修改副本里的目标元素，再把整个副本赋值给State的array属性。这里给你几种常用的方法：

方法1：用扩展运算符（最简洁）

this.state = { array: ['a', 'b', 'c'] };
onBack() {
  // 用扩展运算符创建原数组的浅拷贝
  const newArray = [...this.state.array];
  // 修改副本里的第3个元素（索引从0开始）
  newArray[2] = 'something';
  // 更新State
  this.setState({ array: newArray });
}

方法2：用slice()方法创建副本

onBack() {
  // slice()不传参数会返回原数组的浅拷贝
  const newArray = this.state.array.slice();
  newArray[2] = 'something';
  this.setState({ array: newArray });
}

方法3：函数式更新（推荐用于依赖之前State的场景）

如果你的更新逻辑依赖于之前的State状态（比如连续多次更新），最好用函数式的setState，避免异步更新带来的问题：

onBack() {
  this.setState(prevState => {
    // 基于上一次的State创建数组副本
    const newArray = [...prevState.array];
    newArray[2] = 'something';
    return { array: newArray };
  });
}

总结 #

所有修改State中数组或对象的操作，都要遵循不可变性原则：先创建副本，修改副本，再把副本赋值给State。这样既不会有语法错误，也能保证React正确触发组件更新。

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