Question

我正在使用react 16.8和eslint-plugin-react-hooks 1.6.0。当我有条件地使用钩子时，我希望eslint可以警告我。有我的配置：

focusProperty

如果我在自定义钩子中有条件地使用钩子，则会出现这样的警告：“有条件地调用React Hook \“ useState \”。在每个组件渲染中必须以完全相同的顺序调用React Hooks。”

ChangeListener

但是如果我在函数组合中使用钩子，它将无法正常工作。

"eslintConfig": {
    "parser": "babel-eslint",
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
}

Answer 1

这对我有用：

首先安装适当的eslint插件：

   $ npm i --save-dev eslint-plugin-react-hooks

将其与默认配置一起添加到您的.eslintrc中：

  {
    "plugins": [
      ...
      "react-hooks"
    ],
    "rules": {
      ...
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
    ...

安装eslint配置模板“ react-app”：

  $ npm i --save-dev eslint-config-react-app

在.eslintrc中，从新安装的配置进行扩展：

  {
    ...
    "extends": "react-app"

确保您具有新程序包的正确对等依赖项，例如我必须这样做：

  $ npm i --save-dev eslint-plugin-flowtype

确保您的eslint软件包为5+版本，例如5.16.0可以工作，更高的也应该工作（但是请注意，更高的eslint也需要更新的nodejs）。

  $ npm i --save-dev eslint@^5.0.0

重新启动VSCode
按Cmd-Shift-U打开输出端子，在下拉菜单中切换到Eslint，并检查其是否已正确加载。

Answer 2

实际上，当我将您的函数粘贴到由create-react-app创建的App.js文件上时，运行该应用程序时会出现预期的错误。

也许您的函数不被视为React组件（您的函数被视为通用函数）。确保您对范围（import React from "react";）有反应

Answer 3

您不应在条件内使用钩子。这将导致错误，因为唯一的反应就是知道如何将有状态值与变量关联，这是按顺序进行的，在这种情况下，这是不一致的。

签出文档，他们阐明钩子规则。 https://reactjs.org/docs/hooks-rules.html

您想要的就是这样

 const [a, setA] = useState(initialVal)
 if (Math.random() > 0.5){
    setA(0)
 }

Answer 4

您的eslint配置对我也不起作用，但是此功能可以做到：

"eslintConfig": {
  "extends": "react-app"
}

Answer 5

我添加了以下依赖项：@typescript-eslint/eslint-plugin和@typescript-eslint/parser到package.json，并将以下内容添加到.eslintrc.js：

extends: [... 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended']
parser: '@typescript-eslint/parser',
plugins: [..., '@typescript-eslint'],

当我有条件地使用react挂钩时，为什么eslint-plugin-react-hooks没有警告？

5 个答案: