React Native中对象状态变更时屏幕视图未更新该如何解决？

核心原因 #

• React 触发组件重渲染的前提是状态引用发生变化，你当前的写法属于对原有state对象的原地修改，返回的还是同一个内存地址的对象，React浅比较后判定状态无变更，因此不会触发重渲染，Text组件自然不会更新。
• 控制台打印能看到修改后的值属于常见误区：浏览器控制台打印引用类型时，展示的是对象的实时值，你展开结果时读取的是已经被原地修改后的属性，不代表React已经识别到状态变化。
• 额外隐藏错误：subtract分支直接访问prev.calendar.booking，但初始state中没有calendar字段，运行时会抛出属性读取异常。

修正代码 #

更新状态时需要返回全新对象，逐层复制原有属性保证引用变更：

const handleChange = (action: string) => {
    if (action === 'add') {
      setMenu((prev) => ({
        ...prev,
        toppings: {
          ...prev.toppings,
          chicken: prev.toppings.chicken + 1
        }
      }))
    } else if (action === 'subtract') {
      setMenu((prev) => ({
        ...prev,
        calendar: {
          ...prev.calendar,
          // 兼容calendar不存在的场景，避免报错
          booking: (prev.calendar?.booking ?? 0) - 1
        }
      }))
    }
}

如果项目中频繁操作深层状态，也可以接入immer库简化写法，无需手动逐层展开对象。

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