【问题标题】：Invalid hook call error in React Material-UI simplest Hello Wold testReact Material-UI最简单的Hello Wold测试中的无效钩子调用错误
【发布时间】：2020-09-25 21:32:03
【问题描述】：

我想用React 和Material-UI 开始一个项目。首先，我想做最简单的 Hello World。最简单的基于新的Ubuntu OS 中的官方文档，但我得到了错误！我的代码是这样的：

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"
    ]
  }
}

【问题讨论】：

您还没有使用钩子发布任何代码。您确定错误不是源自其他组件吗？或者正如错误所说，您可能有多个版本的 React，例如 material-ui 可能正在使用一个版本，而您的应用正在使用另一个版本。
如果您执行npm ls react 应该可以帮助您确定是否安装了它的两个版本。

标签： javascript reactjs react-native material-ui

【解决方案1】：

我在您的依赖项中没有看到具体化尝试在您的应用程序的根目录中使用 npm install @material-ui/core 重新安装。

【讨论】：

【解决方案2】：

npm install @material-ui/core

您必须包含该库。

【讨论】：