React更新嵌套对象state时setState无限重渲染如何解决

你的代码存在两个核心问题，分别对应无限重渲染报错和状态更新逻辑错误：

• 无限重渲染的根因：你将setTestObject()的调用直接写在了组件函数的顶层执行位置，没有包裹在事件回调、useEffect等条件触发的执行上下文里。React 中状态更新会触发组件重渲染，重渲染时会重新执行组件顶层的所有代码，再次触发setTestObject()调用，最终形成「状态更新→组件重渲染→再次触发状态更新」的死循环，触发React的重渲染次数保护报错。
• 状态更新逻辑的语法错误：你在拷贝嵌套对象时选错了展开的目标对象，在personalData字段内部错误展开了外层的testObject，而非testObject.personalData。这种写法不仅会把外层的id、telephone等属性错误塞入personalData对象中，还会丢失personalData下原有的alias、gender属性。

首先要遵守React状态更新的基本规则：禁止在组件函数顶层无条件调用状态更新函数，所有更新逻辑必须放在事件处理函数、useEffect钩子等不会在渲染阶段无条件执行的位置。

针对嵌套对象的更新，需要逐层做浅拷贝，保证不直接修改原始状态对象（符合React不可变状态的要求），具体写法如下：

1. 基础写法（明确依赖当前渲染周期的状态值时使用） #

// 示例：放在事件回调中触发更新
const updateName = () => {
  setTestObject({
    // 第一步：拷贝外层状态的所有属性
    ...testObject,
    // 第二步：重写需要更新的嵌套字段personalData
    personalData: {
      // 第三步：拷贝personalData下的原有属性，避免丢失未更新的字段
      ...testObject.personalData,
      // 第四步：覆盖需要修改的目标属性
      name: 'McDonnell DC-10'
    }
  })
}

2. 函数式更新写法（推荐，避免闭包导致的旧状态问题） #

如果更新逻辑依赖上一次的状态值，优先使用函数式更新，React会将最新的状态值传入回调参数，避免闭包缓存旧状态导致更新异常：

setTestObject(prevState => ({
  ...prevState,
  personalData: {
    ...prevState.personalData,
    name: 'McDonnell DC-10'
  }
}))

如果业务中存在大量深层嵌套的状态更新，手动逐层拷贝代码冗余度高，可以引入immer库简化不可变更新逻辑，直接用看似直接修改状态的语法写更新逻辑，由immer内部帮你完成不可变拷贝。

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