React setState更新对象数组报exampleState不可迭代解决方案

• 你的exampleState初始值是对象数组类型，但调用setExampleState时传入的是普通对象：{...exampleState, name: 'Michael'}。把数组用展开运算符展开到对象里，得到的是键为数组索引的普通对象，本身不实现可迭代协议，下一次组件渲染执行for...of遍历的时候，就会抛出TypeError: exampleState is not iterable错误。
• 额外的逻辑问题：在循环里重复调用state setter，既不符合React状态不可变的更新原则，还会引发重复渲染、状态更新被覆盖的问题。

不需要写循环重复触发状态更新，直接用数组map方法生成符合要求的新数组，一次性完成状态更新即可：

// 基础写法
setExampleState(exampleState.map(item => {
  if (item.name === 'John') {
    // 匹配到目标项时，返回拷贝后修改属性的新对象，不修改原对象
    return {...item, name: 'Michael'}
  }
  // 非目标项直接返回原值
  return item
}))

如果更新逻辑存在闭包场景、无法保证拿到最新的state值，推荐用函数式更新的写法，更严谨：

setExampleState(prevState => prevState.map(item => {
  if (item.name === 'John') {
    return {...item, name: 'Michael'}
  }
  return item
}))

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