React中如何使用useState更新包含数组的嵌套对象状态

错误写法原因 #

• 第一种写法存在语法错误，逻辑上是往数组末尾追加新元素，并非修改已有元素的属性
• 第二种写法错误将数组类型的ControlGaps当做普通对象展开，和原有状态结构完全不匹配

更新顶层对象属性（比如修改下标为index的项的applicable值） #

推荐使用函数式更新避免状态依赖过时问题，写法如下：

setControlGaps(prev => {
  return prev.map((item, i) => {
    // 只修改目标下标的项
    if (i === index) {
      // 展开原有属性，覆盖要修改的字段
      return { ...item, applicable: checked }
    }
    // 其他项直接返回，不需要修改
    return item
  })
})

更新深层嵌套的question字段 #

如果要修改某个Pizza下的具体问题属性，比如修改下标为gapIndex的Pizza项里，下标为questionIndex的问题的answer字段，写法如下：

setControlGaps(prev => {
  return prev.map((gapItem, gapI) => {
    if (gapI === gapIndex) {
      return {
        ...gapItem,
        // 遍历questions数组修改目标问题
        questions: gapItem.questions.map((q, qI) => {
          if (qI === questionIndex) {
            // 覆盖要修改的字段即可
            return { ...q, answer: '你的新答案' }
          }
          return q
        })
      }
    }
    return gapItem
  })
})

核心原则 #

React状态更新需要遵循不可变原则，不要直接修改原状态对象/数组，所有修改都要返回全新的副本，不需要修改的部分可以直接复用原有引用，既保证性能也能让React正确触发重渲染。

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