使用扩展运算符更新useHook对象报错，如何定位对象中重名的目标key？

错误原因 #

• 函数式更新的返回值未使用{}包裹为合法对象，现有写法不符合JS对象语法规范，直接触发语法错误。
• 深层嵌套属性更新不能直接操作目标字段，必须逐层展开每一层父级对象，同时符合React状态不可变的更新要求。

正确实现代码 #

要更新author下的phone字段，逐层展开父级对象后覆盖目标属性即可：

const phoneHandler = (e) => {
  const val = e.target.value
  setModifiedNonFormData(prev => ({
    // 展开最外层状态保留其他字段
    ...prev,
    // 展开author对象保留其他属性
    author: {
      ...prev.author,
      // 覆盖目标phone字段
      phone: val
    }
  }))
}

如果需要更新author.shippingAddress下的同名phone字段，再多展开一层shippingAddress即可：

const shippingPhoneHandler = (e) => {
  const val = e.target.value
  setModifiedNonFormData(prev => ({
    ...prev,
    author: {
      ...prev.author,
      shippingAddress: {
        ...prev.author.shippingAddress,
        phone: val
      }
    }
  }))
}

可选优化方案 #

如果项目中嵌套状态层级较多，手动逐层展开写法繁琐，可以引入immer库简化不可变更新逻辑：

// 安装依赖：npm install immer
import { produce } from 'immer'

const phoneHandler = (e) => {
  const val = e.target.value
  setModifiedNonFormData(produce(draft => {
    // 直接修改draft对象即可，immer内部会生成符合不可变要求的新状态
    draft.author.phone = val
  }))
}

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