使用useReducer时出现TypeError: Cannot read properties of null错误求助

可能的原因及解决方案 #

1. React 导入或版本异常 #

• 确认你的 React 版本在 16.8 及以上（Hooks 从这个版本开始支持），版本过低直接升级到稳定版。
• 若当前导入语句存在 tree-shaking 或打包问题，尝试修改导入方式：

  import * as React from 'react';
  const { useReducer, useContext, useEffect } = React;
  

2. 在非允许区域调用 useReducer #

Hooks 必须在函数组件顶层或自定义 Hook 顶层调用，不能在条件判断、循环、嵌套函数、类组件中使用。

• 检查你的代码结构，确保 useReducer 是在函数组件内部的顶层执行：
  错误示例：

  // 错误：直接在模块顶层调用 Hook
  const [{ loading }, dispatch] = useReducer(reducer, initialState);
  
  function OrderComponent() {
    return <div>{loading}</div>;
  }
  

  正确示例：

  function OrderComponent() {
    // 正确：在函数组件顶层调用 Hook
    const [{ loading, error, order, successPay, loadingPay }, dispatch] =
      useReducer(reducer, {
          loading: true,
          order: {},
          error: '',
          successPay: false,
          loadingPay: false,
      });
    return <div>{loading}</div>;
  }
  

3. 未定义 reducer 函数 #

你的代码中使用了 reducer 但未给出定义，若 reducer 为 undefined 或 null，也可能间接引发报错。需确保已正确定义 reducer：

const reducer = (state, action) => {
  switch(action.type) {
    case 'FETCH_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, order: action.payload };
    // 补充其他业务逻辑的 case
    default:
      return state;
  }
};

4. 构建工具配置问题 #

• 若使用 Webpack、Vite 等工具，尝试清除构建缓存后重新打包，排除配置错误导致 React 未被正确打包的情况。
• CDN 环境下，需确保同时引入 react 和 react-dom 的对应版本文件，且加载顺序正确。

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