收到错误：无效的挂钩调用挂钩只能在功能组件的主体内部调用

如何解决收到错误：无效的挂钩调用挂钩只能在功能组件的主体内部调用

我使用react-cli创建一个应用，然后导入material-UI，只需一个简单的代码

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Appbar from './Componets/Appbar/Appbar'

function App() {
  return (
    <div className="App">
        <Appbar />
    </div>
  );
}

export default App;

Appbar.js

import React from 'react';
import {AppBar,Toolbar,Typography } from '@material-ui/core'
function Appbar(){
    return (
        <AppBar>
            <Toolbar>
                <Typography variant="h5" color="inherit">
                    BLACKPINK HOUSE
                </Typography>
            </Toolbar>
        </AppBar>
    )
}
//before
export default AppBar

//after 
export default Appbar

我还修改了节点的依赖关系

{
  "name": "news","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","react": "16.13.0","react-dom": "16.13.0","react-scripts": "3.4.3"
 },

它只是无法启动，如果我删除了应用内的应用栏，它将运行

错误消息是这样的

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

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

模块../src/index.js C：/用户/管理员/桌面/MaterialUI/news/src/index.js:7

   4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,

webpack_require C：/用户/管理员/桌面/ MaterialUI / news / webpack / bootstrap：784

  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports,module,module.exports,hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;

fn C：/ Users / Administrator / Desktop / MaterialUI / news / webpack / bootstrap：150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

webpack_require C：/用户/管理员/桌面/ MaterialUI / news / webpack / bootstrap：784

  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports,hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;

checkDeferredModules C：/用户/管理员/桌面/ MaterialUI / news / webpack / bootstrap：45

  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--,1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 

Array.webpackJsonpCallback [作为推送] C：/用户/管理员/桌面/ MaterialUI / news / webpack / bootstrap：32

  29 |  deferredModules.push.apply(deferredModules,executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;