React父组件更新后子组件未重新渲染，求问题排查思路

问题核心 #

你遇到的问题本质是React的状态更新规则：只有当状态（state）或属性（props）发生不可变变化时，组件才会触发重新渲染。如果直接修改父组件中state里的对象（而非创建新对象），React无法检测到状态变化，子组件自然感知不到props的更新。

具体修正方案 #

1. 确保父组件状态的不可变更新 #

直接修改原对象的错误写法：

// 错误：直接修改原state对象，React无法检测变化
const gameData = this.state.gameData;
gameData.currentChar = 'newChar';
this.setState({ gameData });

正确的不可变更新写法：

// 正确：创建新对象，保留原对象属性并更新目标字段
this.setState(prevState => ({
  gameData: {
    ...prevState.gameData, // 展开原对象所有属性
    currentChar: 'newChar' // 更新需要修改的字段
  }
}));

2. 检查子组件的props接收与渲染 #

• 确认子组件确实在使用父组件传递的目标对象（如gameData）进行渲染，而非用自身局部状态缓存数据。
• 如果子组件用了React.memo（函数组件）或shouldComponentUpdate（类组件），默认浅比较无法识别对象内部属性变化。此时要么：
  • 给memo传入自定义深比较函数；
  • 要么在父组件用useMemo缓存传递给子组件的对象，确保对象引用变化时才触发传递。

3. 验证更新函数的调用逻辑 #

你通过props传递更新函数给子组件的逻辑是对的，但要确保子组件调用该函数时，触发的是父组件的不可变更新，而非直接修改原对象。

补充说明 #

React的状态更新依赖引用变化——修改原对象时，对象的引用未改变，React的diff算法会判定状态无变化，因此不会触发组件重新渲染，子组件也就拿不到更新后的props。

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