javascript - hook.useHook 在实现新端点 NextJS 时不是一个函数

Question

我遇到了TypeError: hook.useHook is not a function下面的错误。

我是一个绝望的举动，我已经放置了很多类型，any但正如你猜到的那样，这并没有解决它。

这是我的use-subscription.tsx文件

import ...

export type UseSubscribe<
    H extends MutationHook<any> = MutationHook<any>
    > = ReturnType<H['useHook']>

export const fetcher: HookFetcherFn<any> = mutationFetcher

const fn = (provider: Provider) => provider.subscriptions?.useSubscriptions!

const useSubscribe: any = (...args: any) => {
    const hook = useHook(fn)
    return useMutationHook({ fetcher, ...hook })(...args)
}

export default useSubscribe

我不确定问题是什么，如果不是关于类型，我什至不知道要寻找什么，我试图将其更改为any.

这是use-hook.ts

export function useFetcher() {
  const { providerRef, fetcherRef } = useCommerce()
  return providerRef.current.fetcher ?? fetcherRef.current
}

export function useHook<
  P extends Provider,
  H extends MutationHook<any> | SWRHook<any>
>(fn: (provider: P) => H) {
  const { providerRef } = useCommerce<P>()
  const provider = providerRef.current
  return fn(provider)
}

export function useSWRHook<H extends SWRHook<any>>(
  hook: PickRequired<H, 'fetcher'>
) {
  const fetcher = useFetcher()

  return hook.useHook({
    useData(ctx) {
      const response = useData(hook, ctx?.input ?? [], fetcher, ctx?.swrOptions)
      return response
    },
  })
}

export function useMutationHook<H extends MutationHook<any>>(
  hook: PickRequired<H, 'fetcher'>
) {
  const fetcher = useFetcher()

  return hook.useHook({
    fetch: useCallback(
      ({ input } = {}) => {
        return hook.fetcher({
          input,
          options: hook.fetchOptions,
          fetch: fetcher,
        })
      },
      [fetcher, hook.fetchOptions]
    ),
  })
}

如果有人对此问题感兴趣，您可以在https://github.com/vercel/commerce中找到更多信息，我将其用作创建我的基础存储库。

标签： javascriptreactjsreact-hooksnext.js