Reactjs 为什么我会得到'；错误：无效的挂钩调用'；当我在函数内部调用时？

当我在Next.js应用程序上使用钩子时，我收到了“错误：无效钩子调用”。我不明白为什么会出现这个错误，因为我认为它是在函数组件内部调用的

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/index.js (16:44) @ getStaticProps
  14 | 
  15 | export const getStaticProps = async () => {
> 16 |   const { data, loading, error } = useQuery(LINGO_QUERY);
     |                                            ^
  17 | 
  18 |   return {
  19 |     props: {

---

在这里查看我的代码沙盒：

您不能在组件外部使用钩子。您的

getStaticProps

不是一个组件，而是一个用于返回props的函数

您可以在此处阅读更多信息：

只需在组件中使用

useQuery

hook，并使用它获取一些数据并定期渲染

您可能正在某个地方作为常规函数执行该函数

---

要使用钩子，您需要在组件内部调用它，这是一条规则，因为钩子可能会返回一些jsx并将其作为必需的React。您不能在React组件外部使用钩子

然后，在nextjs中，

getStaticProps

是一个在服务器端上下文中使用的函数，在构建时预呈现

---

它不是函数组件，你不能在那里使用钩子，我想你应该调用fetch。我使用的是Apollo，所以我不需要使用fetch？你使用Apollo钩子，所以你只能在函数组件中使用它们。谢谢。我已经更新了我的codesandbox，因为现在我得到了

TypeError:无法读取未定义的属性“map”

。但是

数据

是在钩子中定义的，不是吗？@Anthony您需要更新您的codesandbox，它不能正常工作。显示内部服务器错误。你需要添加所有的dependenciesI我想这是因为我的API在本地主机上运行，我不知道如何让它在沙箱上运行。不过，查询位于沙箱中的api目录中，我已经在GraphQL平台上对其进行了本地测试，它返回了预期的结果。

{“data”：{“allTerms”：[{“id”：“600456129d8f3455d5631403”，“term”：“accelerator”，“slug”：“accelerator”}}

首先需要检查它是否未定义。不能当场使用

.map

。添加三值

数据？数据地图…：null

谢谢，我已经更新了我的沙盒。我现在得到

TypeError:无法读取未定义的属性“map”

，但我认为我已经在钩子中定义了它？您定义了它，但我认为他的值为null或未定义（因为.map仅可用于数组）。可能您的查询工作不正常，或者您在GraphQL中没有任何数据可获取。我已经在GraphQL游乐场中查看了一下，并返回了我期望的结果。目前数据库中只有一个术语：

{“data”：{“allTerms”：[{“id”：“600456129d8f3455d5631403”，“term”：“accelerator”，“slug”：“accelerator”}}}

好，但您试图通过

数据

迭代.map，但不是数组。查看您的GraphQL响应。我认为您需要使用.map和

allTerms

array<代码>数据.allTerms.map（（…）=>{…}）谢谢。这会起作用，但我认为它不会填充页面，因为它需要等待数据，因此返回未定义的。这应该用wait来完成吗？