在 useEffect 挂钩中使用 redux action creator 时无法禁用 react-hooks/exhaustive-deps 警告答案

【问题标题】：Trouble disabling react-hooks/exhaustive-deps warning when using redux action creator inside useEffect hook在 useEffect 挂钩中使用 redux action creator 时无法禁用 react-hooks/exhaustive-deps 警告
【发布时间】：2020-05-14 01:28:20
【问题描述】：

尝试在 useEffect 挂钩中调用 redux 操作创建者，出现以下警告-

React Hook useEffect has a missing dependency: 'getPlanQuotes'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

这是 useEffect 钩子-

const { getPlanQuotes } = props;

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

所以我尝试使用// eslint-disable-next-line react-hooks/exhaustive-deps 禁用它。像这样-

useEffect(() => {
    getPlanQuotes();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

但它仍然会在没有指定 react-hooks/exhaustive-deps 的情况下在控制台上引发警告

而且编辑器还会抛出以下错误-

.eslintrc 配置-

{
    "parser": "babel-eslint",
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
    "env": {
        "jest": true,
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": ["json", "prettier"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "rules": {
            "no-underscore-dangle": [
                "error",
                {
                    "allow": ["_id", "b_codes_id"]
                }
            ],
            "react/prop-types": [1]
        },
        "settings": {
            "import/resolver": "meteor"
        },
        "globals": {
            "_": true,
            "CSSModule": true,
            "Streamy": true,
            "ReactClass": true,
            "SyntheticKeyboardEvent": true
        }
    }
}

【问题讨论】：

请发布实际代码 sn-ps 而不是屏幕抓取。在该图像中看不到任何挂钩代码。
@DrewReese，对此和延迟表示抱歉。我添加了实际的代码 sn-ps。请检查它们。
您介意分享您的 lint 配置吗？（.eslintrc.json 或 .eslintrc.config 等。）您可能缺少那里的规则定义。有趣的是，虽然 linter 仍在标记钩子，但还是让我们检查一下。它应该在您的项目根目录中。
我不建议你忽略 linter 的指示。为什么不将getPlanQuotes 添加到依赖项中？
@SILENT 有时可以忽略，例如，当您希望效果仅触发一次时，安装时，使用空的依赖数组，或者当变量是回调时（如 OP 的 sn-p）您知道在组件的生命周期内不会更改/变异，因此您不会将其包含在数组中。然而，不利的一面是，如果每次更新钩子而不重新考虑导致逻辑错误的依赖关系。

标签： reactjs react-redux react-hooks eslint

【解决方案1】：

@DrewReese 怀疑这是.eslintrc 配置的问题。 plugins 数组缺少 react-hooks 和 rules 对象缺少 react-hooks 规则。

所以，最终的配置如下-

{
    "parser": "babel-eslint",
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
    "env": {
        "jest": true,
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": ["json", "prettier", "react-hooks"], //added "react-hooks" here
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "rules": {
            "no-underscore-dangle": [
                "error",
                {
                    "allow": ["_id", "b_codes_id"]
                }
            ],
            "react/prop-types": [1],
            "react-hooks/rules-of-hooks": "error", // added "react-hooks/rules-of-hooks"
            "react-hooks/exhaustive-deps": "warn" // added "react-hooks/exhaustive-deps"
        },
        "settings": {
            "import/resolver": "meteor"
        },
        "globals": {
            "_": true,
            "CSSModule": true,
            "Streamy": true,
            "ReactClass": true,
            "SyntheticKeyboardEvent": true
        }
    }
}

【讨论】：

但是.eslintrc文件只是在编码的时候，对于构建的项目的警告呢？
@pmiranda 你能详细说明一下吗？构建项目是什么意思？