React中useReducer更新父状态未触发子组件props更新及重排问题

核心错误：Reducer状态更新方式错误 #

你在reducer的"TWO"分支中，没有正确合并action.payload的属性到新状态里，导致currentObject的var2字段根本没被更新，所以子组件监听object.var2的useEffect不会触发。

原错误代码片段：

case "TWO":
  let newState = {
     ...state,
     action.payload // 错误：直接将payload对象作为属性，而非展开其内部键值对
  };
  return newState;

修正步骤 #

1. 修复Reducer的状态合并逻辑
   使用对象展开语法...action.payload，把payload中的键值对合并到新状态中，才能正确更新var2字段：

const reducer = (state, action) => {
  switch(action.type){
        case "TWO":
          let newState = {
             ...state,
             ...action.payload // 正确展开payload的属性，更新var2
          };
          return newState;
        default:
          return state; 
  }
}

2. 修正Dispatch调用的语法错误
   updateObjecct函数中的dispatch调用缺少闭合花括号，会导致语法错误，无法正常触发状态更新：

const updateObjecct = (param) => {
    let obj = param;
    setLocalVar1(obj.var1);
    // 补上最后的}，修正语法错误
    dispatch({type:"TWO", payload: { var2: "hello" }}); 
}

额外说明 #

父组件中使用JSON.stringify(currentObject)作为useEffect依赖虽然能触发回调，但不推荐——每次渲染都会执行序列化操作，存在性能损耗。建议直接依赖currentObject，React会对状态做浅比较来判断是否触发回调。

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