为什么我收到这个错误：无效的钩子调用钩子只能在函数组件的主体内部调用/

如何解决为什么我收到这个错误：无效的钩子调用钩子只能在函数组件的主体内部调用/

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了钩子规则
3. 您可能在同一个应用中拥有多个 React 副本

这是我的 App.js 代码

import './App.css';
import Header from './Header'
function App() {
  return (
    <div className="app">
      < Header />

    </div>
  );
}
export default App;

Header.js 代码

import React from 'react'
import './Header.css';
import PersonIcon from '@material-ui/icons/Person';
import IconButton from '@material-ui/core/IconButton';


function Header() {

    return (    
        <div className='header'>
            <IconButton>
                <PersonIcon fontSize="large" className="header__icon" />
            </IconButton>
        </div>
    )
}
export default Header

我在 index.js 中使用了我的 App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,document.getElementById('root')
);
reportWebVitals();

当我删除 <PersonIcon> 和 <IconButton> 标签时，代码工作正常。

解决方法

试试这个

npm uninstall @material-ui/core @material-ui/icons

然后

npm i @material-ui/core @material-ui/icons

重启 React 服务器

npm start
// OR
yarn start

让我知道它是否有效，祝你好运