使用MDBReact官方示例代码实现登录组件时遭遇Invalid Hook Call错误的求助

我从MDBReact官网拿到登录组件的现成代码，在项目里用的时候碰到了这个错误：

Error: Invalid hook call. Hooks can only be called inside the body of a function component.

官方提示的可能原因有这几个：

• React与渲染器（如React DOM）版本不匹配
• 违反了Hook的使用规则
• 应用中存在多个React副本

下面是我的相关代码和配置，希望能得到帮助：

登录组件代码 #

import React from "react";
import { MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn } from 'mdbreact';
export default function LoginForm() {
  return(<MDBContainer>
    <MDBRow>
      <MDBCol md="6">
        <form>
          <p className="h5 text-center mb-4">Sign in</p>
          <div className="grey-text">
            <MDBInput label="Type your email" icon="envelope" group type="email" validate error="wrong" success="right" />
            <MDBInput label="Type your password" icon="lock" group type="password" validate />
          </div>
          <div className="text-center">
            <MDBBtn>Login</MDBBtn>
          </div>
        </form>
      </MDBCol>
    </MDBRow>
  </MDBContainer>)
}

package.json配置 #

{
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.2",
    "axois": "0.0.1-security",
    "bootstrap": "^4.6.0",
    "history": "^5.0.0",
    "immer": "^8.0.0",
    "jquery": "^3.5.1",
    "local-storage": "^2.0.0",
    "mdbreact": "^5.0.2",
    "popper.js": "^1.16.1",
    "react": "^16.0.0",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^16.0.0",
    "react-hook-form": "^7.0.7",
    "react-redux": "^5.0.6",
    "react-router": "^3.2.6",
    "react-router-dom": "^5.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.0.13",
    "redux": "^3.7.2"
  },
  "resolutions": {
    "immer": "7.0.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

App.js代码 #

import './App.css';
import React from 'react'
import { Provider } from 'react-redux'
import store from './newProject/Store/store'
import RouterApplication from './newProject/router'
function App() {
  return (
    <Provider store={store}>
      <RouterApplication></RouterApplication>
    </Provider>)
}
export default App

路由文件代码 #

import { Route, Switch } from 'react-router-dom'
import LoginForm from './Component/LoginComponent/login'
import Signup from './Component/SignupComponent/signup'
import React from 'react'
export default function RouterApplication() {
  return <div>
    <Switch>
      <Route path='/signup'>
        <Signup></Signup>
      </Route>
      <Route path='/login'>
        <LoginForm></LoginForm>
      </Route>
    </Switch>
  </div>
}

问题分析与解决方案 #

Hey, let's fix this invalid hook call issue right away! Looking at your package.json, the root cause is pretty clear:

You're using mdbreact@5.0.2, which relies heavily on React Hooks (introduced in React 16.8.0), but your current react and react-dom versions are stuck at 16.0.0—way before Hooks existed! That's exactly the first compatibility issue the error message mentions.

There are also a few other outdated/misconfigured dependencies that could cause problems down the line, so let's tackle everything step by step:

1. Upgrade React & ReactDOM to Hook-compatible versions #

Run this in your terminal to get the latest stable version of React 16.x (it fully supports Hooks and plays nice with your other dependencies):

npm install react@^16.14.0 react-dom@^16.14.0 --save

2. Update react-scripts to match #

Your react-scripts version (1.0.13) is ancient and won't work well with newer React versions. Upgrade it to a compatible release:

npm install react-scripts@^3.4.4 --save

3. Clean up invalid dependencies #

You have a typo: axois should be axios. Uninstall the misspelled one since it's useless:

npm uninstall axois --save

4. Optional (but recommended): Update ecosystem dependencies #

Your react-redux, react-router, and redux versions are way out of date and might conflict with newer React or react-router-dom. If you run into other issues later, upgrade them to versions compatible with React 16.x:

npm install react-redux@^7.2.6 react-router@^5.2.0 redux@^4.1.2 --save

5. Reinstall dependencies and restart #

Delete your node_modules folder and package-lock.json file, then run:

npm install
npm start

After these steps, the invalid hook call error should disappear—MDBReact's components will now be able to use Hooks in a React version that supports them.

内容的提问来源于stack exchange，提问作者ester