React TypeScript项目使用react-map-gl时报无效Hook调用错误是什么原因？

问题排查与解决方案 #

• 第一步：校验React与React DOM版本一致性
  查看项目package.json中react与react-dom的版本号，二者必须完全匹配，且版本需 ≥16.8.0 满足Hook运行要求。若使用React 18，需确保react-map-gl版本 ≥7.0.10，低版本react-map-gl未适配React 18的渲染逻辑。
• 第二步：排查重复React实例
  执行命令npm ls react（yarn用户执行yarn list react），检查是否存在多个版本的React实例。如果存在多版本，可通过如下方式修复：
  1. 删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件后重新执行依赖安装
  2. npm v8+用户可在package.json中添加配置强制统一React版本：

  {
    "overrides": {
      "react": "$react",
      "react-dom": "$react-dom"
    }
  }
  

  yarn用户可添加resolutions配置实现相同效果。
  若你当前在开发monorepo项目、或者使用npm link引入了本地自定义依赖，需将子依赖的React配置为外部依赖，避免重复打包React代码。
• 第三步：检查组件调用规则
  确认你的Map组件是通过<Map />的JSX语法渲染，而非直接以普通函数形式调用Map()，直接调用函数组件会导致Hook脱离组件运行上下文触发报错。
• 第四步：校验类型包版本匹配
  TypeScript项目需确保@types/react与@types/react-dom的版本号与react版本完全对齐，类型包版本不匹配也可能触发Hook相关的运行时异常。

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