在 useEffect 挂钩内使用 redux 操作创建者时，无法禁用 React-hooks/exhaustive-deps 警告

Question

尝试在 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
        }
    }
}

Answer 1

.eslintrc正如 @DrewReese 怀疑的那样，这是配置问题。数组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
        }
    }
}