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

Question

我有一个简单的登录组件，它工作正常（即，它在成功登录后大部分时间都重定向到仪表板）。 但是，有时会出乎意料，它会引发错误：

错误：超出最大更新深度。 当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

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

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}/>
  } 
}, [])