1

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

  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

4

2 回答 2

2

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

于 2019-06-14T21:59:48.030 回答
-1

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

于 2020-08-20T08:18:50.830 回答