开发Spotify克隆应用时引入MUI图标触发Hook调用错误求助

问题场景 #

开发Spotify克隆应用时，在SidebarOption组件中添加{Icon && <Icon className="sidebarOption__icon" />}代码后，应用背景变为空白，同时触发错误：Warning: Invalid hook call. Hooks can only be called inside of the body of a function component，即使仅渲染<Icon />也会报错，需求是正常引入MUI图标。

相关代码 #

SidebarOption.js #

import React from 'react'
import "./SidebarOption.css";

function SidebarOptions({title, Icon}) {
 return (
  <div className="sidebarOption">
    {Icon && <Icon className="sidebarOption__icon" />}
    {Icon ? <h4>{title}</h4> : <p>{title}</p> }

  </div>
)
}

export default SidebarOptions

Sidebar.js #

import React from 'react'
import './Sidebar.css'
import SidebarOption from './SidebarOption'
import HomeIcon from '@mui/icons-material/Home';
import SearchIcon from '@mui/icons-material/Search';
import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';

function Sidebar() {
 return (
  <div className="sidebar">
    <img 
      className="siderbar__logo"
      src="https://getheavy.com/wp-content/uploads/2019/12/spotify2019-830x350.jpg"
      alt=""
    />
    <SidebarOption Icon={HomeIcon} title="Home"/>
    <SidebarOption Icon={SearchIcon} title="Search" />
    <SidebarOption Icon={LibraryMusicIcon} title="Your Library" />
  </div>
 )
 }

export default Sidebar

解决方案 #

1. 确保React与React DOM版本完全一致 #

MUI图标组件内部依赖React Hooks，若react和react-dom版本不匹配，会直接导致Hook调用失效：

• 打开项目根目录的package.json，检查react和react-dom的版本号，确保两者完全相同。
• 若版本不一致，执行命令更新：

  npm install react@latest react-dom@latest
  

2. 清理重复的React实例 #

项目中存在多个React实例是触发该错误的高频原因：

• 执行命令查看当前React版本依赖树：

  npm ls react
  

• 若输出显示多个React版本，执行以下步骤清理：

  rm -rf node_modules package-lock.json
  npm install
  

3. 验证MUI依赖安装完整 #

确保已正确安装MUI核心库及图标依赖：

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

4. 统一组件命名（可选但建议） #

SidebarOption.js中组件定义为SidebarOptions，但Sidebar.js中导入命名为SidebarOption，虽然默认导出不影响功能，但建议保持命名一致避免混淆：

// SidebarOption.js 修改后
import React from 'react'
import "./SidebarOption.css";

function SidebarOption({title, Icon}) {
 return (
  <div className="sidebarOption">
    {Icon && <Icon className="sidebarOption__icon" />}
    {Icon ? <h4>{title}</h4> : <p>{title}</p> }
  </div>
)
}

export default SidebarOption

完成以上步骤后，重新启动项目，即可正常渲染MUI图标，解决空白和Hook错误问题。

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