使用箭头函数组件时触发React invalid hook call错误求助

为什么第一种写法会报错？ #

你的Foo组件代码本身符合Hooks规则，但报错的核心原因大概率是你在使用这个组件时，直接把它当成普通函数调用了，而非通过React组件的方式渲染。

React要求Hooks必须运行在React组件的上下文里，只有当组件通过JSX标签（<Foo/>）或React.createElement(Foo)被React渲染时，内部的Hooks才能被正确识别。如果直接写Foo()调用函数，Hooks就脱离了React的管控上下文，触发Invalid hook call错误。这种情况不在官方列出的三类常见原因里，容易被忽略——你可以检查引入Foo的地方，是否存在直接调用函数的写法。

为什么第二种写法能正常运行？ #

在Bar组件中，你用<Foo/>的方式引用Foo，这是React组件的标准渲染方式。此时React会以组件身份处理Foo，为它创建对应的组件上下文，Foo内部的Hooks就能在正确的环境中执行，自然不会触发报错。

验证与修复 #

如果第一种写法的引入代码是类似这样的错误用法：

import Foo from './Foo';

const App = () => {
  // 错误：直接调用组件函数
  const fooElement = Foo();
  return <div>{fooElement}</div>;
}

只需改成标准的组件渲染方式即可：

import Foo from './Foo';

const App = () => {
  // 正确：用JSX标签渲染组件
  return <div><Foo/></div>;
}

内容的提问来源于stack exchange，提问作者Tempura