数组对象按key匹配更新值：findIndex有效但未替换反而新增？

嘿，我知道你现在遇到的麻烦了——明明用findIndex找到了正确的索引，赋值后却不是替换目标元素，反而新增了一个，这大概率是因为你直接修改了React的state数组导致的！

为啥会出这问题？ #

React的state是不可变的，也就是说你不能直接去修改this.state里的数组或者对象，必须通过setState来更新状态。你直接操作this.state.data的话，会绕过React的状态管理机制，结果自然就不符合预期了，比如你看到的新增元素而不是替换。

正确的做法应该是这样 #

我们得遵循React的规则，先复制原数组，修改副本后再用setState更新：

• 先找到目标元素的索引
• 复制原数组（用扩展运算符[...this.state.data]或者slice()都可以）
• 在副本里修改对应索引的元素
• 调用setState把新数组更新到状态里

给你写好的代码示例 #

// 先找到要修改的元素索引
const targetIndex = this.state.data.findIndex(el => el.key === '-Lu2u7z4--ImiPSkWa1B');

// 先确认确实找到了这个元素（避免索引为-1的情况）
if (targetIndex !== -1) {
  // 复制原数组，创建一个新的副本
  const updatedData = [...this.state.data];
  // 修改副本里对应位置的元素
  updatedData[targetIndex] = 'totototot';
  // 用setState更新状态
  this.setState({ data: updatedData });
}

执行完这段代码后，你的data数组就会变成你想要的样子：

[
  { "key": "-Lu2u6ib92Ay8Pw1O-3m", "question": "1" },
  { "key": "-Lu2u8kZRs2E4X4TgxZd", "question": "4" },
  "totototot"
]

额外提醒一下 #

• 永远别直接改this.state里的东西，不管是数组还是对象，一定要用setState
• 如果数组里的元素是复杂对象（比如嵌套的对象），浅拷贝可能不够，这时候可以用JSON.parse(JSON.stringify(arr))或者Lodash的cloneDeep来做深拷贝
• 记得判断一下targetIndex不等于-1，避免处理找不到元素的情况哦

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