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

Question

我在我的 React 项目中使用了 material-ui，但出现了这个错误

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

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）

2. 你可能违反了 Hooks 规则

3. 你可能在同一个应用程序中有多个 React 副本

这是我的代码

标题.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

应用程序.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.xx