如何让 `eslint-plugin-react-hooks` 对导出为 `default` 的功能组件进行 lint？

Question

我特意创建了一个简单的函数式组件，打破了钩子的规则。 它包含以下代码段。

  if (Math.rand > 0.5) {
    const [name, setName] = useState("fred");
  }

我希望eslint-plugin-react-hooks会发现这个明显的错误，但事实并非如此。 在尝试深入了解之后，我发现当我将函数导出为默认值时 - linter 并没有这样做。 （我正在使用@typescript-eslint/parser来获得它的价值）。

有没有办法让后一种语法与eslint / eslint-plugin-react-hooks ，或者我必须始终创建一个命名的功能组件，然后运行export default name; 在功能之下？

https://codesandbox.io/s/hook-demo-c10y2

Answer 1

所以......我刚刚发现这是eslint-plugin-react-hooks一个已知错误。 似乎您需要为插件提供一个命名函数来捕获和整理您的错误。 https://github.com/facebook/react/issues/14404 （特别是"react-hooks/rules-of-hooks"规则）。

Answer 2

您的代码违反了钩子规则，在该规则中，钩子只能在代码的顶层调用。 它不能放在 if...else 语句中。 在此处查看钩子规则： https : //reactjs.org/docs/hooks-rules.html