随机出现的React Hook问题：使用react-select触发无效Hook调用错误

报错核心原因 #

你遇到的Invalid hook call报错来自三个可能的原因：

1. 当前使用类组件开发，react-select v5及以上版本完全基于React Hook实现，Hook规则不允许在类组件中直接调用Hook。
2. 项目中存在多个React副本，导致Hook调用上下文异常。
3. 项目使用的React版本低于16.8.0，该版本是首个支持Hook的版本，版本过低无法识别Hook调用。

解决方案1（推荐）：改造为函数组件 #

这是当前React生态推荐的实现方式，改造后的代码如下：

import React from 'react';
import Select from 'react-select'

export function Home() {
  return (
    <div>
      <Select />
    </div>
  );
}

改造完成后重新运行项目即可正常加载组件。

解决方案2：降级react-select适配类组件 #

如果项目必须保留类组件写法，可以将react-select降级到支持类组件的v4版本：

1. 卸载当前版本：
   npm uninstall react-select
2. 安装v4最新版本：
   npm i --save react-select@4.x
   安装完成后无需修改现有代码，直接运行即可。

解决方案3：修复依赖异常 #

如果上述两种方案都未生效，执行以下步骤排查修复：

1. 检查React版本：执行npm ls react，如果版本低于16.8.0，执行命令升级：
   npm i react@latest react-dom@latest
2. 排查多React副本：执行npm ls react，如果输出存在多个版本的React，删除项目下的node_modules文件夹和package-lock.json（或yarn.lock）文件后重新执行npm install即可。

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