无法编译 React Hook “useQuery”在函数“home”中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数答案

【问题标题】：Failed to compile React Hook "useQuery" is called in function "home" which is neither a React function component or a custom React Hook function无法编译 React Hook “useQuery”在函数“home”中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数
【发布时间】：2020-11-29 13:31:55
【问题描述】：

我的反应应用在浏览器中显示以下错误

Failed to compile
./src/pages/home.js
  Line 24:30:  React Hook "useQuery" is called in function "home" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

【问题讨论】：

...和相关的home.js片段...？
很可能你忘记使用: React.FC 之类的东西来输入你的组件，以便编译器知道它是一个 React 组件。否则，如消息所述，useQuery 只能在 React 函数组件（而不是类组件）内部使用。

标签： javascript reactjs graphql react-hooks apollo

【解决方案1】：

我看到了下面的警告

Warning: The tag <home> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

并将<home/> 更改为<Home/>

这解决了问题！

PS：所有 React 组件名称必须以大写字母开头。如果您以小写字母开头的组件名称，它将被视为内置元素，如 a 或 a 。这是因为 JSX 的工作方式。

【讨论】：