reactjs - 通过 mdbreact 设计组件

Question

我从 mdbreact 网站获取了现成的代码，我得到了错误

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

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和修复此问题的提示。

我希望你能帮助我

登录组件

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>)

}

包.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();

应用程序

import './App.css';
import React from 'react'
import { Provider } from 'react-redux'
import store from './newProject/Store/store'
import React from 'react';

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

标签： reactjsreact-hooksmdbreact