React中如何更新数组内对象的单个属性且不新增对象

你的问题出在对prev的处理上——information是一个包含单个对象的数组，prev指向这个数组，直接用{...prev}会把数组的索引作为键展开成新对象，导致结构错误。

要修改数组中第一个对象的TellNo属性，同时保持数组结构不变，有两种常用写法：

写法一：直接操作数组首个元素（适用于固定只有一个对象的场景） #

直接复制数组里的第一个对象，修改目标属性后重新组成数组：

onChange={(e) =>
  setInformation((prev) => [
    { ...prev[0], TellNo: e.target.value }
  ])
}

写法二：使用map遍历数组（适用于数组可能有多个对象的场景） #

通过map遍历数组，仅修改目标位置的对象，其他对象保持原样：

onChange={(e) =>
  setInformation((prev) =>
    prev.map((item, index) =>
      // 这里假设要修改第一个对象，索引为0
      index === 0 ? { ...item, TellNo: e.target.value } : item
    )
  )
}

两种写法都遵循了React的不可变更新原则：不直接修改原state，而是生成包含修改后内容的新数组/对象。

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