React useContext中Dispatch无法传递至父组件问题排查

尝试使用React Context + Reducer做状态管理时，App组件中通过useContext(DispatchContext)获取的dispatch始终为null，即使已经在ContextProvider中配置了dispatch。预期页面输出"inittest"，但实际显示"init"。以下是相关代码：

import { Dispatch, createContext, useContext, useEffect, useReducer, useState } from 'react';

interface ContextValue {
  test: string
}

export type TestState = ContextValue;
const initialState: TestState = {
  test: 'init',
};

interface Action {
  type: string;
  payload?: any;
}

const ValueContext = createContext<TestState>(initialState);
const DispatchContext = createContext<Dispatch<Action> | null>(null);

interface Props {
  children: React.ReactNode;
}

class ContextActions {
  public dispatch: Dispatch<Action>;

  constructor(dispatch: Dispatch<Action>) {
    this.dispatch = dispatch;
  }

  append(value: string) {
    return this.dispatch({
      type: 'append',
      payload: value,
    });
  }
}

function reducer(state: TestState, action: Action): TestState {
  switch (action.type) {
    case 'append': {
      return {
        ...state,
        test : state.test + action.payload,
      };
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
}

export const ContextProvider: React.FunctionComponent<Props> = ({
  children,
}) => {
  const [value, dispatch] = useReducer(reducer, initialState);
  console.log('ContextProvider', value, 'dispatch set: ' + !!dispatch);
  return (
    <ValueContext.Provider value={value}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </ValueContext.Provider>
  );
}

export function useTest(): [
  TestState,
  ContextActions | null,
] {
  const dispatch = useContext(DispatchContext);
  const [ actions, setActions ] = useState<ContextActions | null>(null);
  useEffect(() => {
    if (dispatch) {
      console.log('useTest.useEffect if(dispatch)');
      if (!actions) {
        console.log('useTest.useEffect if(dispatch) && if(!actions)');
        setActions(new ContextActions(dispatch));
      } else {
        console.log('useTest.useEffect if(dispatch) && (action already set)');
        actions.dispatch = dispatch;
      }
    } else {
      console.log('useTest.useEffect (no dispatch)');
    }
  }, [dispatch, actions]);
  return [
    useContext(ValueContext),
    actions,
  ];
}

export default function App() {
  const [value, actions] = useTest();

  useEffect(() => {
    if (actions) {
      console.log('TestPage.useEffect if(actions)', actions);
      actions.append('test');
    } else {
      console.log('TestPage.useEffect (no actions)');
    }
  }, [actions]);

  return (
    <ContextProvider>
      <div>{value.test}</div>
    </ContextProvider>
  );
}

问题原因 #

核心问题是App组件是ContextProvider的父级组件：在App组件中调用useTest时，组件还没有被ContextProvider包裹，此时读取DispatchContext只能拿到Context的默认值null，自然无法触发状态更新。

解决方案 #

有两种可行的修改方式，本质都是确保调用useTest的组件处于ContextProvider的作用域内：

方式1：将状态逻辑移到ContextProvider包裹的子组件中 #

修改App组件，把使用useTest的部分抽成独立的子组件，让子组件被ContextProvider包裹：

export default function App() {
  return (
    <ContextProvider>
      <TestContent />
    </ContextProvider>
  );
}

// 抽离出的子组件，处于ContextProvider作用域内
function TestContent() {
  const [value, actions] = useTest();

  useEffect(() => {
    if (actions) {
      actions.append('test');
    }
  }, [actions]);

  return <div>{value.test}</div>;
}

方式2：将ContextProvider提升到App组件外层 #

在项目的入口文件（如index.tsx）中，用ContextProvider包裹整个App组件，确保App组件本身处于Context的作用域内：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ContextProvider } from './your-context-file-path';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <ContextProvider>
    <App />
  </ContextProvider>
);

此时App组件可以保留原有的useTest调用逻辑：

export default function App() {
  const [value, actions] = useTest();

  useEffect(() => {
    if (actions) {
      actions.append('test');
    }
  }, [actions]);

  return <div>{value.test}</div>;
}

验证效果 #

修改后，useTest能正确读取到Context中的dispatch，actions.append('test')会触发reducer更新状态，页面最终会显示预期的"inittest"。

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