反应异步钩子怎么做答案

【问题标题】：react async hook how to do it反应异步钩子怎么做
【发布时间】：2021-03-17 11:19:13
【问题描述】：

这是我的反应组件..

const DashboardContext = React.createContext()

function DashboardStateProvider({ children }) {
  const wallet = useWallet()

  const Provider = DashboardContext.Provider

  if (wallet.account)
    return (
      <WithSubscription Provider={Provider} connectedAccount={wallet.account}>
        {children}
      </WithSubscription>
    )

  return (
    <Provider
      value={{
        
      }}
    >
      {children}
    </Provider>
  )
}

async function WithSubscription({ Provider, connectedAccount, children }) {
  // Juror ANT balances, 24h ANT movements and claimed subscription fees
  const data = await apiCALL(connectedAccount)

  // bla bla bla code here
}

function useDashboardState() {
  return useContext(DashboardContext)
}

export { DashboardStateProvider, useDashboardState }

问题是当我在withSubscription 函数上使用async 时它显示错误。这确实是强制性的，因为在其中，我正在进行异步调用 await apiCALL。

错误：

未处理的拒绝（错误）：无效的挂钩调用。钩子只能是在函数组件的主体内部调用。这可能发生出于以下原因之一：

您可能有不匹配的 React 版本和渲染器（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用程序中拥有多个 React 副本请参阅 react-invalid-hook-call 以获取有关如何调试和解决这个问题。

有什么想法吗？我必须解决这个问题，而且我不是反应开发人员，所以我很感激直接回答要改变什么。

更新：

如何使用useDashboardState？

import { useDashboardState } from '../components/Dashboard/DashboardStateProvider'

 const {
    data
  } = useDashboardState()

【问题讨论】：

问题出在useDashboardState函数中；特别是因为在这个函数内部调用了useContext。 Hooks 只能在 React 组件的顶层调用。
为什么在WithSubscription 上没有async 也能工作？
你能分享你调用useDashboardState函数的代码吗？另外，请阅读rules of hooks，您违反了其中一项规则。
useDashboardState() - 这应该在反应组件内；你不能调用一个反应组件外部的钩子。
如果我从 async 中删除 withSubscription ，它工作正常。所以问题是在那里添加async。为什么？

标签： javascript reactjs react-native react-hooks

【解决方案1】：

我没有测试你的代码，但我认为这里有问题 const DashboardContext = React.createContext() 尝试在函数组件内部创建这个钩子

【讨论】：

React.createContext() 不是钩子，也不会创建钩子。