Question

import {useEffect, useState} from 'react';

require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); //This is returning true;

const Crypto = () => {
    const [coins, setCoins] = useState(true);

    return (
        <div>
            Crypto
        </div>
    );
};
export default Crypto;

这是 Crypto.js 文件

import React from 'react';

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";


import CssBaseline from '@material-ui/core/CssBaseline';
import Topnavbar from "./components/Topnavbar.js";
import Navigation from "./components/Navigation.js";

import routes from "./routes.js";
import { useStyles } from "./styles";

const App = () => {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);

  const handleDrawerOpen = () => {
    console.log("open setting to true");
    setOpen(true);
  };

  const handleDrawerClose = () => {
    console.log("open setting to false");
    setOpen(false);
  };

  return (
    <div className={classes.root}>
      <CssBaseline /> 
      <Topnavbar  open = {open} classes = {classes} handleDrawerOpen = {handleDrawerOpen} />
      
      
      <Router>
      <Navigation open = {open} classes = {classes} handleDrawerClose = {handleDrawerClose}/>
      <main className = {classes.content}>
          <div className={classes.toolbar} />
          <Switch>
            {routes.map((route, index) => {
              return (
                <Route exact key = {index} path = {route.path}>
                  {route.component}
                </Route>
              );
            })}
          </Switch>
      </main>
      </Router>
    </div>
  );
}

这是 App.js 文件

import Crypto from './pages/Crypto.js';

const routes = [
    {
        label : 'Crypto',
        path  : '/crypto',
        component : Crypto,
    },

]

export default routes;

这个 routes.js 文件。

{
  "name": "try_webpack",
  "version": "1.0.0",
  "description": "tyring webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve  --config webpack.config.js",
    "build": "webpack --config webpack.prod.js",
    "vis": "webpack-bundle-analyzer ./stats.json",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.12.1",
    "@material-ui/icons": "^4.11.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "clsx": "^1.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.7",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.1.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.1.0",
    "webpack": "^5.44.0",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  }
}

这是 package.json 文件。

Crypto.js 位于 App.js 的路由器中。当我在 Crypto.js 文件中添加 useState 时，我收到了无效的钩子调用。我查过了。

npm ls 反应

npm ls react-dom

npm ls react-router-dom

我只能看到一个已安装的版本。还检查了 console.log(window.React1 === window.React2); 这也返回true。一旦我删除了 useState，我就没有看到任何错误。对于样式，我使用的是 material-ui。

Answer 1

钩子只能从功能组件中调用。您应该尝试将 const App = () => { 更改为 function App() {

未捕获的错误：在反应路由器内的组件内使用 useState 时，钩子调用无效

1 个答案: