React警告：渲染组件时更新另一组件，函数内setState如何处理？

问题根源 #

你遇到的Cannot update a component ('X') while rendering a different component ('Y')警告，本质是因为在HonestTimePicker组件的状态更新回调里直接调用了父组件的onChange方法——这个方法大概率会触发ShiftsModal的状态更新，而此时HonestTimePicker还处于渲染流程中，属于跨组件的同步更新，违反了React的渲染规则。

另外你代码里还有个隐性问题：直接修改了setState回调里的prev状态对象，React状态是不可变的，直接修改会导致状态更新异常。

修复方案 #

分两步修改：

1. 修正handleTime的状态更新逻辑，返回新的状态对象，不直接修改原对象：

const handleTime = (type, value) => {
  setState(prev => ({
    ...prev,
    [type]: value
  }));
};

2. 把onChange的调用移到useEffect中，监听状态变化，确保当前组件渲染完成后再通知父组件：

import { useEffect } from 'react';

// ... 组件其他代码

useEffect(() => {
  onChange && onChange(`${state.hours}:${state.minutes}`);
}, [state.hours, state.minutes, onChange]);

为什么这样有效 #

• 修正状态更新逻辑后，符合React不可变状态的要求，避免潜在的状态更新bug。
• 用useEffect监听状态变化，会在当前组件状态更新完成、渲染结束后执行，此时再触发父组件的状态更新，就不会和当前组件的渲染流程冲突，自然消除了警告。

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