Eslint React Hooks 错误：eslint-plugin-react-hooks 对 useEffect 中的函数依赖项的详尽 deps 警告答案

【问题标题】：Eslint React Hooks Error: eslint-plugin-react-hooks exhaustive deps warning for a function dependency in useEffectEslint React Hooks 错误：eslint-plugin-react-hooks 对 useEffect 中的函数依赖项的详尽 deps 警告
【发布时间】：2019-11-26 01:57:29
【问题描述】：

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

它会导致无限循环。

【问题讨论】：

您是否尝试过使用useEffect(() => {fetchUser()}); 完全省略依赖关系数组？换句话说，不要将第二个参数传递给useEffect。
抱歉，我更新了我的问题。我有多个道具被传递给组件，并且我不想每次这些道具更改时都运行 useEffect 。我只想第一次获取用户，而不是每次所有 API 都更改时。
如何使用user 作为useEffect 的第二个参数，因为您只想在user 更改时更新。如useEffect(() => {fetchUser()}, [user]);
嗯，总有// eslint-disable-next-line react-hooks/exhaustive-deps
将您的解决方案发布为答案并将其标记为解决方案的其他人会有所帮助。

标签： javascript reactjs eslint react-hooks

【解决方案1】：

问题在于函数 fetchUser 在每次渲染中都会发生变化。您可以使用“useCallback”解决问题。

例子：

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


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

参考资料：

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

错误说，你需要将效果回调使用的所有资源（变量/函数）放在依赖数组中。

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

您需要维护 api 响应的加载状态。并且，在回调中进行检查，如下所示：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：