Tengo un componente de inicio de sesión simple que funciona bien (es decir, redirige al tablero la mayoría de las veces después de un inicio de sesión exitoso). Sin embargo, a veces de la nada, arroja un error:
Error: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos.
Aquí está mi código. Tenga en cuenta que cuando ocurre el error, noto que <Redirect to={routes.DASHBOARD}/> se llama, pero en lugar de redirigir a este componente, se sigue llamando al mismo componente de inicio de sesión infinitamente.
import React, { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Redirect } from 'react-router'; import { login } from '../../redux/actions'; import styles from './login.module.css'; import {routes} from '../../routes'; export function Login() { const { user } = useSelector((state) => state); const dispatch = useDispatch(); const [email, setEmail] =useState(''); const [password, setPassword] = useState(''); const handleLogin = ()=>{ dispatch(login({email, password})) } const handleEmailInput = (e)=>{ setEmail(e.target.value) } const handlePasswordInput = (e)=>{ setPassword(e.target.value) } if((user.tokenReceived || localStorage.getItem('token')) && !user.tokenExpired){ return <Redirect to={routes.DASHBOARD}/> } return ( <div> <div className={styles.row}> <input type='text' placeholder="Email" onChange={handleEmailInput}/> <input type='text' placeholder="Password" onChange={handlePasswordInput}/> <button className={styles.loginButton} onClick={handleLogin} > Login </button> {user.error && "Some Error occurred. Please try again"} </div> </div> ); } Estoy bastante seguro de que lo estoy haciendo de la manera correcta, pero ¿debería envolver esto en useEffect ,
if((user.tokenReceived || localStorage.getItem('token')) && !user.tokenExpired){ return <Redirect to={routes.DASHBOARD}/> }Creo que su problema radica cuando llama a la función handleLogin al hacer clic en el botón. Llame a la función como una función de flecha.
<button className={styles.loginButton} onClick={() => handleLogin()} >Cada vez que actualiza un estado, la página se vuelve a representar. Significa que cada vez que actualizas un estado, este if es llamado.
Utilice un UseEffect para validar los datos cuando el usuario acceda a la página.
useEffect(() => { if((user.tokenReceived || localStorage.getItem('token')) && !user.tokenExpired){ return <Redirect to={routes.DASHBOARD}/> } }, [])