错误：无效的挂钩调用。在等待之后调用钩子时 - 你如何等待来自一个钩子的数据实例化到另一个钩子？答案

【问题标题】：Error: Invalid hook call. when calling hook after await - how do you await for data from one hook to instantiate into another?错误：无效的挂钩调用。在等待之后调用钩子时 - 你如何等待来自一个钩子的数据实例化到另一个钩子？
【发布时间】：2021-03-08 14:25:36
【问题描述】：

我试图在使用 swr 获取数据之前将标头注入到我的 fetcher 中。我需要等待自定义钩子响应数据，然后才能将其注入自定义提取器。

如果我使用 promise.then 我知道我正在获取相关数据，并且如果我使用字符串手动注入它，它会起作用并且我会看到标题。它只是异步进行

我该怎么做呢？

代码：

    export const useApi = async (gql: string) => {
      const { acquireToken } = useAuth()
      await acquireToken().then(res => { graphQLClient.setHeader('authorization', `Bearer ${res.accessToken}`) })
      const { data, error } = useSWR(gql, (query) => graphQLClient.request(query));
      const loading = !data
      
      return { data, error, loading }

   }

【问题讨论】：

标签： reactjs swr

【解决方案1】：

首先，保持承诺的一致性，使用 async/await 或选择将其与 then 链接，但不能同时使用两者。如果您等待acquireToken()，您可以将其值存储在变量中。此外，如果您选择 async/await 使用 try/catch 块包装您的代码，以便正确处理错误：

    export const useApi = async (gql: string) => {
      const { acquireToken } = useAuth()

      try {
        const res = await acquireToken()
        graphQLClient.setHeader('authorization', `Bearer ${res.accessToken}`)
        const { data, error } = useSWR(gql, (query) => graphQLClient.request(query))
        const loading = !data
      
        return { data, error, loading }

      catch(error) {
        // handle error
      }
   }

【讨论】：