React渲染-有时会发生无限循环

Question

我有一个简单的登录组件，工作良好(即它重定向到仪表板成功登录后的大多数时间)。但是，有时它会突然抛出一个错误:

错误:Maximum update depth exceeded。这可能发生在组件在componentWillUpdate或componentDidUpdate。React将嵌套更新的数量限制为防止无限循环。

这是我的代码。请注意，当错误发生时，我注意到，<Redirect to={routes.DASHBOARD}/>this被调用，但不是重定向到这个组件，相同的登录组件不断被无限调用。

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

我很确定我这样做是正确的，但是我应该把这个包装在useEffect下，

if((user.tokenReceived || localStorage.getItem('token')) && !user.tokenExpired){
return <Redirect to={routes.DASHBOARD}/>
} 

Answer 1

我认为你的问题在于当你调用handleLogin函数按钮点击。作为箭头函数调用该函数。

<button
className={styles.loginButton}
onClick={() => handleLogin()}
>

Answer 2

每次更新状态时，都会重新呈现页面。这意味着每次你更新一个状态，这个if被调用。

当用户刚刚访问页面时，使用UseEffect来验证数据

useEffect(() => {
if((user.tokenReceived || localStorage.getItem('token')) && !user.tokenExpired){
return <Redirect to={routes.DASHBOARD}/>
} 
}, [])