如何将 SWR 与通用 T 一起使用？答案

【问题标题】：How to use SWR with generic T?如何将 SWR 与通用 T 一起使用？
【发布时间】：2021-12-30 15:33:22
【问题描述】：

我已将 SWR 包装到自定义挂钩中：

import useSWR from 'swr';

export enum MethodTypes {
  POST = 'POST',
  PUT = 'PUT',
  GET = 'GET',
  DELETE = 'DELETE',
  PATCH = 'PATCH'
}


type QueryBody = {
  method: MethodTypes;
  body: Object;
};

const useFetch = <T>(url: string, dataObj: QueryBody) => {
  const fetcher = async () => {
    return await fetch(url, {
      method: dataObj.method,
      body: JSON.stringify(dataObj.body)
    }).then((res) => {
      return res.json();
    });
  };

  const { data, error } = useSWR<T>(fetcher);

  return {
    data,
    error
  };
};

export default useFetch;

我称之为：

  const { data } = useFetch<Cart>('myUrl', {
    method: MethodTypes.POST,
    body: {
       myBodyObj
    }
  });

购物车类型：

export type Cart = {
  cartId: string;
  items: Array<CartItem>;
};

我可以看到我收到了 200 响应，因此呼叫通过，但我的数据始终未定义。我在这里错过了什么？

【问题讨论】：

useSWR 的第一个参数应该是键。哪个版本。 swr 你在用吗？
请将此作为答案。我对 swr 文档感到困惑

标签： javascript reactjs typescript react-hooks swr

【解决方案1】：

useSWR 的第一个 arg 应该是 key。

【讨论】：