如何解决 Error: Invalid hook call.ons:?

Question

我已经尝试了堆栈溢出的所有方法，但没有成功。谁能告诉我怎么了？

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您可能有不匹配的 React 版本和渲染器（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用程序中拥有多个 React 副本，请参阅 .. 了解有关如何调试和修复此问题的提示。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import * as serviceWorker from './serviceWorker';
import './index.css';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import App from './App';
import Header from './components/Header';
// import Footer from './components/Footer';

const routing = (
    <Router>
        <React.StrictMode>
            <Header />
            <Switch>
                <Route exact path="/" component={App} />
            </Switch>
            {/* <Footer /> */}
        </React.StrictMode>
    </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
// serviceWorker.unregister();

Header.js

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import CssBaseline from '@material-ui/core/CssBaseline';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    appBar: {
        borderBottom: `1px solid ${theme.palette.divider}`,
    },
}));

function Header() {
    const classes = useStyles();
    return (
        <React.Fragment>
            <CssBaseline />
            <AppBar
                position="static"
                color="white"
                elevation={0}
                className={classes.appBar}
            >
                <Toolbar>
                    <Typography variant="h6" color="inherit" noWrap>
                        BlogmeUp
                    </Typography>
                </Toolbar>
            </AppBar>
        </React.Fragment>
    );
}

export default Header;

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';


function App() {
  return (
    <div className="App">
      <header className="App-header">
    
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

 export default App;

package.json

{
  "name": "privatelessonapi",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "3.0.1",
    "@material-ui/icons": "3.0.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"
  },
  "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"
    ]
  }
}

树：

privatelessonapi@0.1.0 C:\Users\anatei\priapi-react\privatelessonapi
├─┬ @testing-library/react@11.2.7 invalid
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-router-dom@5.2.0
│ ├─┬ react-router@5.2.0
│ │ ├─┬ mini-create-react-context@0.4.1
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ react-scripts@4.0.3 invalid
│ └── react@17.0.2 deduped
└── react@17.0.2

Answer 1

您好@anat，请更新您在 package.json 中的依赖项。 其他一切工作正常。我已经测试了你的代码。

 {
     "name": "privatelessonapi",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.5.0",
         "@testing-library/user-event": "^7.2.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
         "react-scripts": "3.4.3"
     },  
     "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"
         ]
     }   
 }