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

Question

我试图在使用 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 }

   }

Answer 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
      }
   }