React useState两种初始化方式的差异及state不可修改问题咨询

你遇到的两种useState初始化写法状态更新表现不一致的问题，根源不在初始化写法本身，两种写法功能完全等价，问题出在初始化生成的数组元素结构和你后续的更新、渲染逻辑不匹配。

两种初始化写法的共性 #

两者都属于useState的惰性初始化用法：传入的函数仅会在组件首次渲染时执行1次，返回值作为state的初始值，该写法本身符合React规范，不会对后续的状态修改产生限制。

示例1状态看起来无法修改的核心原因 #

1. 元素结构差异
   示例1初始化的数组元素包含id、name、quantity、unit、unitPrice、tax、discount、total8个字段，id从0开始编号；示例2的数组元素仅包含id、name2个字段，id从1开始编号。如果你的更新、渲染逻辑是按照示例2的结构编写，就会出现示例1修改无效的情况：

• 若更新逻辑仅匹配id>=1的元素，会直接漏掉示例1的第一条数据
• 若渲染逻辑读取的是示例1独有的字段，更新时没有修改对应字段，渲染结果看起来就没有变化

2. 状态更新写法不规范
   如果更新状态时直接修改原数组/原对象的属性，没有返回全新的数组，React会判定state引用未发生变化，不会触发组件重渲染，也会出现“状态无法修改”的假象。

通用的数组状态更新参考写法 #

只要严格遵循React不可变数据的更新原则，两种初始化结构的状态都可以正常修改：

setItems(prevItems => {
  return prevItems.map(item => {
    // 匹配需要修改的条目id
    if (item.id === 目标id) {
      // 返回全新的对象，不直接修改原对象属性
      return {...item, name: '修改后的名称'}
    }
    return item
  })
})

内容的提问来源于stack exchange，提问作者K.Kröger