Question

我知道之前有人问过这个问题，但我找不到问题的答案。我收到此错误：

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.

我已经访问了该网站，但我仍然不明白。这是我的 index.js：

import App from './App.js';

App.js：

import React from 'react';
import { render } from 'react-dom';
import { Grid, Typography, Button, ButtonGroup } from '@material-ui/core';

export default function App() {
    return (
        <Grid
            container
            xs={12}
            spacing={1}
            justify="center"
            alignItems="center"
        ><p>Hello</p>
        </Grid>
    )
}
const rootDiv = document.getElementById('root')
render(<App />, rootDiv)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

还有 npm ls react 命令（我对此很困惑）：

├─┬ @testing-library/react@11.2.7
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-scripts@4.0.3
│ └── react@17.0.2 deduped
└── react@17.0.2

这就是我的全部代码。我是新手，所以如果这是一个非常基本的错误，请原谅我。提前致谢。 PS：这是其余代码的回购链接：https://github.com/Coderoftheworld/gpu-shortage-checker/tree/not-working

React.js 错误：无效的钩子调用。 Hooks 只能在函数组件内部调用

0 个答案: