子组件能否用本地状态，通过父组件更新Context并获取prevState？

1. 子组件完全可以使用本地状态并更新 #

你完全可以在子组件里维护自己的本地状态，用来处理局部交互或临时数据变更。这种方式能把组件的局部状态和全局Context状态解耦，子组件只需要在需要同步全局状态时，通过props传递的回调函数把更新信息提交给父组件即可。

举个子组件的实现例子：

import { useState, useContext } from 'react';
import { MyContext } from './ParentComponent';

function ChildComponent(props) {
  // 只读获取全局Context的数据
  const { myContextObjectData } = useContext(MyContext);
  // 初始化本地状态，从Context同步初始值
  const [localMyGroups, setLocalMyGroups] = useState(myContextObjectData.myGroups);

  // 子组件内部更新本地状态的逻辑
  const handleLocalChange = (newSectionData) => {
    // 先更新本地状态
    setLocalMyGroups(prev => ({
      ...prev,
      'Section 1': newSectionData
    }));
    // 将需要同步到全局的信息传给父组件
    props.onSyncMyGroups('Section 1', newSectionData);
  };

  return (
    <div>
      {/* 基于localMyGroups渲染子组件UI */}
    </div>
  );
}

2. Context的prevState由父组件处理 #

现在子组件不再直接调用Context的更新方法，所以子组件不需要获取Context的prevState，所有涉及全局状态的prevState逻辑都由父组件集中处理。

父组件作为Context的提供者，接收子组件传递的更新信息后，在自己的状态更新函数里使用prevState完成不可变更新：

import { useState, createContext } from 'react';
export const MyContext = createContext();

function ParentComponent() {
  const [myContextObjectData, setMyContextObjectData] = useState({
    myGroupOrder: {},
    myGroups: {}
  });

  // 父组件定义的全局状态更新方法，传给子组件作为props
  const handleSyncMyGroups = (sectionKey, newSectionData) => {
    setMyContextObjectData(prevState => ({
      ...prevState,
      myGroupOrder: {...prevState.myGroupOrder},
      myGroups: {
        ...prevState.myGroups,
        [sectionKey]: newSectionData
      }
    }));
  };

  return (
    <MyContext.Provider value={{ myContextObjectData }}>
      <ChildComponent onSyncMyGroups={handleSyncMyGroups} />
      {/* 其他需要更新Context的子组件 */}
    </MyContext.Provider>
  );
}

这种方式把全局状态的更新逻辑统一放在父组件，子组件只负责局部状态维护和传递更新请求，既保证了状态变更的统一性，也让组件职责更清晰。

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