ReactJS中如何从两个不同对象更新状态？

为啥更新完立刻打印是空对象？ #

React的useState和useReducer状态更新都是异步的——调用更新函数后，当前代码块里的状态变量还是旧值，状态真正更新要等下一次组件重新渲染。所以你刚调用完setChildData或updateState就打印，看到的肯定是更新前的空对象。

正确实现两个对象更新状态的方法 #

用useState的正确姿势 #

要合并两个对象到状态里，直接在setChildData的回调里把旧状态和两个新对象合并就行：

const [childData, setChildData] = useState({} as editorDataType);

// 从两个不同对象更新状态
const updateWithTwoObjects = (objA: editorDataType, objB: editorDataType) => {
  setChildData(prev => ({
    ...prev,    // 保留之前的状态内容
    ...objA,    // 合并第一个对象
    ...objB     // 合并第二个对象（如果key重复，objB会覆盖objA）
  }));
};

// 你的getEditorData函数改这么写，别直接打印旧状态
const getEditorData = (editorData: editorDataType) => {
  console.log('传入的editorData:', editorData);
  setChildData(prev => ({ ...prev, ...editorData }));
};

// 要验证更新结果，用useEffect监听状态变化
useEffect(() => {
  console.log('更新后的childData:', childData);
}, [childData]);

用useReducer的正确姿势 #

先给reducer加个处理多对象合并的逻辑，再用useEffect验证结果：

// 定义reducer，支持单个更新和多对象合并
const stateReducer = (state: any, action: any) => {
  if (action.type === 'MERGE_OBJECTS') {
    // 把传入的多个对象依次合并到状态里
    return action.payload.reduce((acc, obj) => ({ ...acc, ...obj }), state);
  }
  // 默认处理单个对象更新
  return { ...state, ...action };
};

const [state, updateState] = useReducer(stateReducer, {});

// 从两个对象更新状态
const updateWithTwoObjects = (objA: any, objB: any) => {
  updateState({
    type: 'MERGE_OBJECTS',
    payload: [objA, objB]
  });
};

// 你的getEditorData函数
const getEditorData = (editorData: editorDataType) => {
  console.log('传入的editorData:', editorData);
  updateState({ content: editorData.content });
};

// 监听state变化看更新结果
useEffect(() => {
  console.log('更新后的state:', state);
}, [state]);

重点提醒 #

• 别在状态更新函数之后直接打印状态变量，那时候状态还没更新，拿的是旧值。
• 要确认状态有没有更新，要么用useEffect监听状态变化打印，要么直接把状态渲染到页面上看。
• 合并多个对象时，如果有相同的key，后面的对象会覆盖前面的，这个要注意。

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