Eslint React Hooks Error: eslint-plugin-react-hooks exhaustive deps warning for a function dependency in useEffect

Question

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Actions from '../actions';

export const UserComponent = ({ foo, baz, bar, user, fetchUser }) => {
  useEffect(() => {
    console.log('##### I WAS CALLED I WAS CALLED');
    fetchUser();
  }, []);

  return (
      <div>
        <p>{user.name}</p>
        <p>{foo} {baz} {bar}</p>
      </div>
  );
};

UserComponent.propTypes = {
  fetchUser: PropTypes.func.isRequired,
  user: PropTypes.shape({}),
};

const mapActionsToProps = {
  fetchUser: Actions.fetchUser,
};

const mapStateToProps = ({ data }) => ({
  user: data.user,
});

export default connect(mapStateToProps, mapActionsToProps)(UserComponent);

我收到错误“React Hook useEffect 缺少依赖项”

但是如果我把 fetchUser 放在依赖数组中

      useEffect(() => {
        console.log('##### I WAS CALLED I WAS CALLED');
        fetchUser();
      }, [fetchUser]);

它会导致无限循环。

Answer 1

如果 fetchUser 操作在应用程序生命周期中没有更改，则禁用 es-lint 警告

由于 fetchUser 是一个 redux 操作，它不会在您的应用程序生命周期中发生变化，我想说您可以安全地为您的情况禁用规则。

useEffect(() => {
    console.log('##### I WAS CALLED I WAS CALLED');
    fetchUser();
    //eslint-disable-next-line import/no-extraneous-dependencies
  }, []);

Answer 2

错误说，您需要将效果回调使用的所有资源(vars/functions)放入依赖项数组中。

因此，您需要将 fetchUsers 放入 dependencies 数组中。但是，它会导致死循环。因为，每次都会重新创建 fetchUsers 实例。

您需要为 api 响应保持加载状态。并且，像下面这样检查回调：

useEffect(() => {
    if(!user && !loading ) {
        fetchUser();
    }
}, [fetchUser, user]);

Answer 3

我在基于钩子的组件中错误地使用了 redux。本指南帮助我在使用钩子的功能组件中使用 redux。 https://react-redux.js.org/next/api/hooks

Answer 4

问题是函数 fetchUser 在每次渲染时都会发生变化。您可以使用 "useCallback".

解决问题

示例：

const initFetchMethod = useCallback(() => {
   return dispatch(fetchUserAction())
}, [dispatch])


useEffect(() => {
   initFetchMethod();
}, [initFetchMethod]);

参考文献：

Eslint React Hooks Error: eslint-plugin-react-hooks exhaustive deps warning for a function dependency in useEffect

Eslint React Hooks Error: eslint-plugin-react-hooks exhaustive deps warning for a function dependency in useEffect

javascript

reactjs

eslint

react-hooks