React 17.0.1 类组件转函数组件时触发Invalid hook call报错

• 当前LoginForm组件内的Hooks调用完全符合规范：两个useState都位于函数组件顶层作用域，没有出现在条件判断、循环、嵌套回调函数中，不存在违反Hooks使用规则的问题。
• 你通过npm ls react做的重复依赖排查，仅覆盖本地node_modules目录内的包副本。如果项目构建配置将React设置为外部全局资源依赖，就会生成两个独立的React运行实例：一个是代码中通过import引入的node_modules内的react包，另一个是HTML模板中通过CDN引入、挂载在全局window对象上的React对象。Hooks执行时会校验当前绑定的React上下文，两个实例不匹配就会触发Invalid hook call报错，这也是你逐行核对官方排查项但定位不到问题的核心原因。

• 打开项目的webpack构建配置文件，检查externals字段的配置内容，删除针对react、react-dom的全局映射规则
• 打开项目的HTML入口模板文件，删除通过CDN引入React、ReactDOM的script标签，确保应用运行时仅使用node_modules内安装的同一版本React实例
• 清理本地依赖缓存后重装：
  • 执行npm cache clean --force清空npm本地缓存
  • 删除本地node_modules目录与package-lock.json文件，重新执行npm install完成依赖安装
  • 启动开发服务，验证报错是否消除
• 代码优化提示：当前代码从react中导入了未使用的useEffect，可以从导入语句中移除，避免ESLint抛出未使用变量的警告

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