React中useContext结合useReducer时handleClick触发dispatch不生效

核心异常原因 #

• Hook调用层级与Provider不匹配是dispatch完全不触发的根本原因
  代码中App组件在函数顶层直接调用useProvider()读取Context，但此时组件树还未渲染到<AppProvider>节点，useContext拿到的是createContext初始化时配置的默认值，其中的dispatch是无任何逻辑的空函数() => null：

// 初始化时的默认dispatch是空函数，不触发reducer
const AppContext = createContext<ContextType>(
  { 
      state: INITIAL_STATE, 
      dispatch: () => null 
  }
);

点击按钮时实际调用的是这个空函数，因此不会触发reducer执行，在reducer中打断点永远无法命中，状态也永远不会更新。

• 附带的非核心逻辑问题：即便dispatch正常生效，handleClick中同步打印state.show也无法拿到最新值——React的状态更新是异步批处理的，同步代码中读取的永远是本次渲染闭包内的旧状态值。

修复操作 #

1. 调整组件层级，保证useProvider的调用位置完全处于AppProvider的包裹范围内，抽离独立的Context消费组件。调整后的App组件结构如下：

   import React, { FC } from 'react';
   import './App.css';
   import { AppProvider, useProvider, SET_SHOW } from './hooks/useProvider';
   
   // 独立消费组件，位于AppProvider包裹内部，可拿到真实的state和dispatch
   const DemoPanel: FC = (): JSX.Element => {
     const { state, dispatch } = useProvider();
     const handleClick = () => {
       dispatch({
         type: SET_SHOW,
         show: !state.show
       });
     };
     return (
       <div className="App">
           { state.show && "Hello World!" }
           <button onClick={handleClick}>
             Show message!
           </button>
       </div>
     )
   }
   
   const App: FC = (): JSX.Element => {
     return (
       <AppProvider>
         <DemoPanel />
       </AppProvider>
     );
   };
   
   export default App;
   

2. 优化Context初始化逻辑，让自定义hook的错误检查真正生效，避免同类问题复现。将Context的默认值设置为null，替代原来写死的空对象：

   // 调整Context类型与默认值
   const AppContext = createContext<ContextType | null>(null);
   
   // 原有的判空逻辑会在Provider外调用hook时直接抛出错误，更早暴露层级问题
   export const useProvider = (): ContextType => {
       const context = useContext(AppContext);
       if(!context){
           throw new Error("useProvider must be used within AppContext");
       }
       return context;
   };
   

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