使用 Material UI 時 React 返回 Invalid hook call 錯誤

Question

我是新手，我正在開發一個具有視頻錄制功能的 web 應用程序。 當我使用 MaterialUI 時，我在瀏覽器控制台中記錄了以下錯誤：

無效的掛鈎調用。 鈎子只能在 function 組件的主體內部調用。 這可能由於以下原因之一而發生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能違反了 Hooks 規則
3. 你可能在同一個應用程序中擁有多個 React 副本

我沒有在我的應用程序中使用鈎子。 我嘗試使用使用單個按鈕組件創建的新反應組件來重現錯誤。 我在下面的代碼中遇到了同樣的錯誤：

應用程序.js

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

function App() {
  return (<>
    <div className="App">
      <header className="App-header">
        <Button>Hi</Button>
      </header>
    </div>
    </>);
}

export default App;

Package.json

{
  "name": "mui_test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "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"
    ]
  }
}

當我做 npm ls 反應時，我得到以下 output：

├─┬ @emotion/react@11.7.1
│ └── react@17.0.2 deduped
├─┬ @emotion/styled@11.6.0
│ └── react@17.0.2 deduped
├─┬ @testing-library/react@12.1.2
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-scripts@5.0.0
│ └── react@17.0.2 deduped
└── react@17.0.2

安裝 react-file-reader 模塊后發生錯誤。 我現在已經卸載了這個模塊。 但我仍然得到這個錯誤。 有人可以指導我解決此錯誤。

Answer 1

確保使用您的 package 管理器安裝 mui，我沒有看到安裝了 mui package。

NPM: npm install @mui/material

YARN yarn add @mui/material

更多信息： https://mui.com