React类组件中使用useEffect触发Invalid hook call错误求助

错误根源分析 #

你的代码直接在模块顶层调用了useEffect，同时尝试在类组件中使用Hook——这完全违反了Hook的核心规则：

• Hooks只能在函数组件的顶层作用域或自定义Hook中调用
• 类组件不支持任何React Hooks

这才是触发Invalid hook call错误的直接原因，和你怀疑的原因3无关。

修复方案 #

方案1：将类组件改为函数组件（推荐） #

函数组件是React Hooks的适用场景，修改后代码如下：

import React, { useEffect } from "react";

function CustomerOnboarding() {
  // 在函数组件顶层正确调用useEffect
  useEffect(() => {
    document.title = `Greetings to aaaa`;
  }, []);

  return <div></div>;
}

export default CustomerOnboarding;

方案2：保留类组件，使用生命周期方法 #

如果需要继续使用类组件，用类组件的componentDidMount生命周期方法替代useEffect的初始化逻辑：

import React from "react";

class CustomerOnboarding extends React.Component {
  componentDidMount() {
    document.title = `Greetings to aaaa`;
  }

  render() {
    return <div></div>;
  }
}

export default CustomerOnboarding;

关于多React副本的检查（针对原因3） #

如果你仍想排查是否存在多React副本的问题，在Rails项目中可以这样操作：

• 查看项目根目录的package.json，确认react和react-dom只有一个版本的依赖声明
• 运行npm ls react（npm用户）或yarn list react（yarn用户），查看依赖树输出，检查是否有子依赖引入了其他版本的React
• 若使用Webpacker，检查config/webpack/environment.js等配置文件，确保没有重复引入React的配置

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