React报Invalid hook call无效钩子调用错误如何排查

问题根因 #

你遇到的报错和React/ReactDOM版本不匹配、多份React副本无关，是代码存在两处违反React运行规则的问题：

• 组件定义末尾手动调用了函数组件：你在代码最后写了GetPokemonInfo()，这行代码在模块顶层作用域直接执行普通函数调用，完全脱离React的渲染调度上下文，此时组件内部的useState运行不在函数组件的合法调用环境里，直接触发Hook调用非法的报错。

  React函数组件不是普通JavaScript函数，不能手动加括号调用，必须通过JSX标签形式（<GetPokemonInfo />）交由React渲染流程挂载，React才会为Hooks初始化正确的运行上下文。

• 渲染流程中直接同步触发状态更新：你在组件函数体顶层直接写了setPokemonState(number * 2)，哪怕修复了手动调用组件的问题，这行代码也会在组件渲染时触发状态更新，状态更新又会触发重渲染，进入无限重渲染的死循环。

修正后代码 #

import { useState, useEffect } from "react";

export function GetPokemonInfo() {
    // 给useState传入明确初始值，避免初始状态为undefined带来的意外问题
    const [pokemonState, setPokemonState] = useState(0);

    // 状态更新放在副作用里执行，组件挂载完成后触发
    useEffect(() => {
        const number = 1;
        setPokemonState(number * 2);
    }, []);

    console.log(pokemonState);

    return (
        <div>
            <p>Hi</p>
        </div>
    );
}
// 删掉原代码末尾手动调用GetPokemonInfo()的语句
// 使用组件时，在需要渲染的位置引入后写<GetPokemonInfo />即可，比如在App组件中挂载

额外说明 #

• create-react-app官方脚手架创建的项目默认React和ReactDOM版本匹配，默认不会出现多份React副本的问题，不需要在这两个方向浪费排查时间。
• 所有setState类的状态更新方法，不要直接写在组件函数的顶层同步执行，需要放在事件回调、useEffect等不会在渲染阶段直接触发更新的位置。

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