javascript - React 功能组件正在无限次重新渲染

Question

我有以下功能组件。

import React, { useState, useEffect } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';

import { loginUserAction } from './redux/actions/authenticationActions';
import { setCookie } from '../../utils/cookies';

const LoginComponent = () => {
  const [notification, setNotification] = useState('');
  const { loading, error, data } = useSelector(state => state.login || {});

  console.log(data) // returns undefined
  console.log(loading) // false
  console.log(error) // false

  useEffect(() => {
    if (data !== undefined && data.hasOwnProperty('message')) {
      setNotification(data.message);
      setCookie('token', data.token, 1);
      setCookie('id', data.id, 1);
    }
  }, [data]);

  return (
    <div>
      <h3>Login Page</h3>
    </div>
  );
};

export default LoginComponent;

如您所见，我将数据作为依赖项传递给 useEffect 挂钩。这使得 useEffect 进入无限循环。我怎样才能解决这个问题？

更新

问题是当完全移除 useEffect 钩子时，组件仍然会无限次重新渲染。知道发生了什么吗？

import React, { useState, useEffect } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';

import { loginUserAction } from './redux/actions/authenticationActions';
import { setCookie } from '../../utils/cookies';

const LoginComponent = () => {
  console.log('Rendering') // Renders infinite times.

  return (
    <div>
      <h3>Login Page</h3>
    </div>
  );
};

export default LoginComponent;

我得到这个错误。

×
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

标签： javascriptreactjsreact-hooks