React Material-UI最简单的Hello Wold测试中的无效钩子调用错误

Question

我想用React和Material-UI开始一个项目。首先，我想做一个最简单的Hello World。在全新的Ubuntu操作系统上基于官方文档进行的最简单的操作，但是我遇到了错误！我的代码是这样的：

App.js

import React from 'react';
import SMSAuth from './components/SMSAuth';

function App() {
  return (
     <SMSAuth/>
  );
}

export default App;

SMSAuth.jsx

import React from 'react';

import Button from '@material-ui/core/Button';

function SMSAuth(){
    return(
        <Button variant="contained" color="primary">
            Hello World
        </Button>
    );
}

export default SMSAuth

我使用Material-UI的官方文档。但是我得到这个错误：

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

package.json

{
  "name": "web-ui",
  "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.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

我看不到在您的依赖中实现，请尝试在应用的根目录中使用npm install @material-ui/core重新安装。

Answer 2

npm install @material-ui/core

您必须包括该库。