我从 mdbreact 网站获取了现成的代码,我得到了错误
错误:无效的挂钩调用。Hooks 只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:
- 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
- 您可能违反了 Hooks 规则
- 您可能在同一个应用程序中拥有多个 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>
}