Hola buen dia estoy trabajando con react. Cuando intento manejar hooks me sale el siguiente error:
× Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Sin embargo he revisado y no logro dar con la razon
Mi package.json:
{
"name": "roadbook-v1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@mui/material": "latest",
"@mui/icons-material": "latest",
"@emotion/styled": "latest",
"@emotion/react": "latest",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"firebase": "^8.10.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^3.0.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"recharts": "^2.1.1",
"styled-components": "^5.3.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.js
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/reset" component={Reset} />
<Route exact path="/dashboard" component={Dashboard} />
</Switch>
</Router>
</div>
);
}
export default App;
y finalmente la url que trato de acceder:
import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { auth, signInWithEmailAndPassword, signInWithGoogle } from "../firebase/firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import "../login.css";
//UI
import { makeStyles } from '@material-ui/core/styles';
import { Button, Grid } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function Login() {
//const classes = useStyles();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [user, loading, error] = useAuthState(auth);
const history = useHistory();
useEffect(() => {
if (loading) {
// maybe trigger a loading screen
return;
}
if (user) history.replace("/dashboard");
}, [user, loading]);
return (
<div className="login">
<Grid
container
direction="column"
justifyContent="center"
alignItems="center"
spacing={2}
>
<Grid item>
<input
type="text"
className="login__textBox"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="E-mail Address"
/>
</Grid>
<Grid item>
<input
type="password"
className="login__textBox"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
/>
</Grid>
<Grid item>
<Button
variant="contained" color="primary"
onClick={() => signInWithEmailAndPassword(email, password)}
>
Login
</Button>
</Grid>
<Grid item>
<Button
variant="contained" color="secondary"
onClick={signInWithGoogle}>
Login with Google
</Button>
</Grid>
<div>
<Link to="/reset">Forgot Password</Link>
</div>
<div>
Don't have an account? <Link to="/register">Register</Link> now.
</div>
</Grid>
</div>
);
}
signInWithEmailAndPassword, signInWithGoogle
en vez de llamarlas inline.