React：子组件渲染时修改父组件状态的报错及优化方案问询

你遇到的报错是因为在父组件未完成完整渲染流程时，子组件同步执行渲染逻辑触发了父组件的状态更新，违反了React要求渲染函数为纯函数的规则，不能在渲染过程中修改自身或父组件状态。

你不需要修改任何子组件代码，只要把父组件传递的useRegisterFoo中的状态更新逻辑延迟到当前渲染周期结束后执行即可，最简单的实现是用queueMicrotask包裹状态更新代码：

class Parent extends Component {
    render = () => {
        return <>
           <Child useRegisterFoo={foo => {
               // 推入微任务队列，等当前渲染流程全部完成后再执行更新
               queueMicrotask(() => {
                   this.setState(foo)
                   // 其余自定义逻辑直接写在这里即可
               })
           }} />
           { this.renderBasedOnRegister() }
           </>
    }
}

该方案优势：

• 子组件代码完全不需要调整，完全符合你要求的极简调用方式
• 多次同步调用useRegisterFoo会自动合并状态更新，不会触发父组件多次重渲染，性能无损耗
• 兼容类组件父组件的现有实现，不需要重构父组件整体逻辑
  如果需要兼容IE等老旧浏览器，可以把queueMicrotask替换为setTimeout(() => {}, 0)，效果一致。

如果你愿意把父组件改为函数式组件（匹配你偏好Hooks的使用习惯），可以把useRegisterFoo实现为标准自定义Hook，完全符合React官方规则，无任何潜在问题：

const Parent = () => {
  const [fooState, setFooState] = useState({})

  // 给子组件的自定义注册Hook
  const useRegisterFoo = (foo) => {
    useEffect(() => {
      // 用函数式更新避免多组件注册时的状态覆盖问题
      setFooState(prev => ({...prev, ...foo}))
    }, [foo])
  }

  return <>
    <Child useRegisterFoo={useRegisterFoo} />
    { renderBasedOnRegister(fooState) }
  </>
}

子组件的调用方式和你的预期完全一致，没有额外成本：

const Child = ({useRegisterFoo}) => {
     useRegisterFoo(1);
     useRegisterFoo(2);
     // 其余子组件逻辑
     return <></>
}

如果存在多个子组件同时注册的场景，状态更新必须使用函数式写法（setState(prev => newState)），避免后执行的更新覆盖之前其他子组件的注册数据。

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