React项目编译失败：useReducer触发Invalid hook call错误求助

控制台报错：

"Invalid hook call. Hooks can only be called inside of the body of a function component."

你已经排查了React与渲染器版本不匹配、多份React副本的问题，现在看你的代码，核心问题出在App.js的导出语句：

原代码最后一行：

export default App();

这里你直接执行了App()函数，导出的是函数执行后的React元素，而非App组件本身。当React尝试渲染这个导出结果时，useReducer Hook实际上是在组件外部（函数执行的上下文）被调用的，完全违反了Hooks必须在函数组件内部调用的规则。

修改方法 #

将导出语句改为导出组件函数本身：

export default App;

修改后的完整App.js代码 #

import "./styles.css";
import React, { useReducer } from "react";
import DigitButton from "./DigitButton";

export const ACTIONS = {
  ADD_DIGIT: 'add-digit',
  CHOOSE_OPERATION: 'choose-operation',
  CLEAR: 'clear',
  DELETE_DIGIT: 'delete-digit',
  EVALUATE: 'evaluate'
}

function reducer(state, { type, payload }) {
  switch(type){
    case ACTIONS.ADD_DIGIT:
      return {
        ...state,
        CurrentOperand: `${state.CurrentOperand || ""}${payload.digit}` ,   
      }    
    // 补充default分支避免状态异常
    default:
      return state;
  }
}

function App(){
  const [{ CurrentOperand, PreviousOperand, Operator }, dispatch] = useReducer(reducer, {})

  return(
    <div className="calculator-grid">
      <div className="output">
        <div className="previous-output">{PreviousOperand} {Operator}</div>
        <div className="current-output">{CurrentOperand}</div>
      </div>

      <button className="span-two">AC</button>
      <button> DEL</button>
      <button> ÷</button>
      <DigitButton digit="1" dispatch={dispatch}></DigitButton>
      <button> 2</button>
      <button> 3</button>
      <button> *</button>
      <button> 4</button>
      <button> 5</button>
      <button> 6</button>
      <button> +</button>
      <button> 7</button>
      <button> 8</button>
      <button> 9</button>
      <button> -</button>
      <button> .</button>
      <button> 0</button>
      <button className="span-two"> =</button>
    </div>
  )
}

export default App;

额外提示 #

1. 你的reducer函数仅处理了ADD_DIGIT分支，建议补充default返回原状态，避免未匹配到类型时状态出现异常。
2. DigitButton组件的导入和使用逻辑无问题，可正常保留。

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