如何摆脱其他库中重复的旧反应

Question

我在我的 React 项目中使用 material-ui，但是我收到了这个错误

错误：无效的挂钩调用。钩子只能在体内调用 的一个功能组件。这可能发生在以下情况之一 原因：

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

这是我的代码

Header.js

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

function Header() {
  return (
    <div className='header'>
      <h2>Header</h2>
      <PersonIcon fontsize="large" className="header_icon"/>    
    </div>
  )
}

export default Header

App.js

import React from 'react';
import './App.css';
import Header from './Header';

function App() {
  return (
    <div className="app">

      <Header />
    </div>
  );
}

export default App;

Answer 1

Material-ui 4.11 对 react: ^16.8.0 有 peerDependency 并且你有 react: 17.0.1。尝试降级你的反应版本来反应：16.x.x