材料 ui 未在反应 js 代码中加载并在控制台中给出错误

Question

我收到错误提示

react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476)
    at useContext (react.development.js:1484)
    at emotion-element-699e6908.browser.esm.js:34
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
(anonymous) @ emotion-element-699e6908.browser.esm.js:34
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:9
options.factory @ react refresh:6
_webpack_require_ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <MuiButtonRoot> component:

    at http://localhost:6251/static/js/bundle.js:51472:66
    at Button (http://localhost:6251/static/js/bundle.js:2441:59)
    at div
    at div
    at Sidebar
    at div
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

当我在 sidebar.js 中使用材料 ui 时出现错误，在此示例中，按钮组件包含在 Sidebar.js 的第 10 行，并将其删除并用 h1 之类的东西替换它使代码正常工作强>

Sidebar.js（我很确定问题在这里）

import React from 'react';
import { Button } from '@mui/material';
import './Sidebar.css';


function Sidebar() {
    return (
    <div className='sidebar'>
        <div className="sidebar-header">
        <Button variant="contained">Contained</Button>
        <p> test text </p>
        </div>
        <div className="sidebar-search">

        </div>
        <div className="sidebar-chats">

        </div>

        </div>);
}

export default Sidebar

App.js（导入侧边栏以运行，我很确定问题出在 Sidebar.js 中）

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


function App() {
  return (
    <div className="App">
    <div className="App-body">
      <Sidebar />
    </div>
    </div>
  );
}

export default App;

如果你知道如何解决这个问题，请帮助我

编辑 1：打包 JSON 文件

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "^5.2.5",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^9.6.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-plugin-react-hooks": "^4.3.0"
  }
}

Answer 1

你检查过这些吗？

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

Answer 2

更新：

卸载并重新安装材料 ui 包，现在可以使用了。

Answer 3

您的导入不正确。请用此行替换以解决问题。

import Button from '@mui/material/Button';

如果导入不正确或未正确安装包，我通常会遇到钩子问题。