React引入react-select等组件报Invalid hook call错误求助

算力阿峰

2026-9-1

React "Invalid hook call" 报错排查方案

这个报错触发的核心原因是React Hook的执行上下文不符合要求，你已经做过依赖调整和重装，按以下优先级排查：

1. 解决多React实例冲突（最高概率）

你当前项目大概率存在多份React副本同时被加载的问题，按以下步骤处理：

npm ls react
npm ls react-dom

如果输出结果中出现多个版本的react/react-dom，或是react被嵌套安装在第三方依赖包的node_modules目录下，就会直接触发这个报错。

修复方式：在前端项目根目录的package.json中添加overrides配置，强制全项目所有依赖使用同一个版本的react和react-dom（npm 8及以上版本支持该配置）：

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

添加完成后，删除所有目录下的node_modules、package-lock.json，重新执行npm install即可。

确认第三方组件的调用没有违反Hook规则：

所有用到react-select、Material UI组件的位置必须使用JSX写法（即<Select />），不能把组件当普通函数直接调用（比如Select()）。
这些依赖Hook的组件不能在类组件中使用，承载这些组件的父组件必须是函数组件。

你贴出的业务代码还存在几个会导致运行异常的问题，Hook问题解决后也需要同步修复：

代码中使用了checkedPlaylists变量但未定义，直接调用Object.values(checkedPlaylists)会触发变量未定义错误，需要补充对应的state声明：

const [checkedPlaylists, setCheckedPlaylists] = useState({});

同时需要给Select组件补充选中值同步逻辑，把用户选中的歌单ID存入该state。

useEffect中重复触发了两次接口请求：当前代码同时写了fetchData()和catchErrors(fetchData())，组件挂载时会请求两次歌单接口，删除单独调用的fetchData()即可，只保留catchErrors(fetchData())。
传给Select的options配置错误：当前你把playlist.name设为value，但后续提交逻辑需要歌单ID拼接接口，需要把value改为playlist.id：

const options = playlists?.items.map(playlist => ({
  value: playlist.id,
  label: playlist.name
}))

axios请求未配置接口前缀：当前写的/playlists/${id}是相对路径，如果没有提前配置axios的baseURL为Spotify服务地址，会把请求发到前端自身服务地址导致接口报错。
列表渲染的key存在重复风险：当前用topSong+index作为key，topSong是数组类型，转字符串后可能出现重复值，建议把歌曲ID存入track数据后用歌曲ID作为key。

内容的提问来源于stack exchange，提问作者sophie.frankie