[英]How can I get `eslint-plugin-react-hooks` to lint functional components that are exported as `default`?
I have deliberately created a simple functional component that breaks the rules of hooks.我特意创建了一个简单的函数式组件,打破了钩子的规则。 It contains the following snippet.
它包含以下代码段。
if (Math.rand > 0.5) {
const [name, setName] = useState("fred");
}
I expect that eslint-plugin-react-hooks
would lint this clear mistake, but it doesn't.我希望
eslint-plugin-react-hooks
会发现这个明显的错误,但事实并非如此。 After trying to get to the bottom of this, I discovered that when I am exporting a function as default - the linter does not do it's thing.在尝试深入了解之后,我发现当我将函数导出为默认值时 - linter 并没有这样做。 (I am using the
@typescript-eslint/parser
for what that's worth). (我正在使用
@typescript-eslint/parser
来获得它的价值)。
Is there any way to have the latter syntax work with eslint
/ eslint-plugin-react-hooks
, or must I always create a named functional component, then run export default name;
有没有办法让后一种语法与
eslint
/ eslint-plugin-react-hooks
,或者我必须始终创建一个命名的功能组件,然后运行export default name;
beneath the function?在功能之下?
https://codesandbox.io/s/hook-demo-c10y2 https://codesandbox.io/s/hook-demo-c10y2
So... I just discovered that this is a known bug with eslint-plugin-react-hooks
.所以......我刚刚发现这是
eslint-plugin-react-hooks
一个已知错误。 Seems like you need to have a named function for the plugin to catch & lint your errors.似乎您需要为插件提供一个命名函数来捕获和整理您的错误。 https://github.com/facebook/react/issues/14404 (specifically just the
"react-hooks/rules-of-hooks"
rule). https://github.com/facebook/react/issues/14404 (特别是
"react-hooks/rules-of-hooks"
规则)。
Your code is breaking the rules of hooks at which a hook must only be called at the top level of your code.您的代码违反了钩子规则,在该规则中,钩子只能在代码的顶层调用。 It cannot be placed inside an if...else statement.
它不能放在 if...else 语句中。 Check out the rules of hooks here: https://reactjs.org/docs/hooks-rules.html
在此处查看钩子规则: https : //reactjs.org/docs/hooks-rules.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.