0

我在这里发布了一些关于 SWR hook 的问题，因为在我尝试使用它的过程中有点困难，因为我遇到了一些问题

现在这一次错误似乎很小。

我想做的是在我的 API 中设置一个断点，试图获取一些数据，（顺便说一下，我正在使用 axios）现在的问题是，我必须{data}从 useSWR 解构，因为那是我的数据'我从 axios 接收，我认为这导致了一个参数问题，我必须将其传递给钩子以使一切正常。

让我给你看一些代码

使用 useSWR

const Part1 = () => {
  const router = useRouter();

  const [searchBar, setSearchBar] = useState<boolean>(false);

  const [userId, setUserId] = useState<dataObject>({});
  const [results, setResults] = useState<string>("");

  // Searchbar users

  useEffect(() => {
    const auth: dataObject = JSON.parse(localStorage.getItem("Auth"));
    setUserId(auth);
  }, []);

  const { data }: multipleUsers = useSWR(
    () => "http://localhost:5000/api/user/allU/" + userId.user.id,
    fetcher,
    "",
    data
  );

如您所见，我传递给函数的最后一个参数是名称数据，因为如果我不这样做，它会给我错误（如前所述，我已经发布了一个关于该问题的问题），这是

Block-scoped variable 'data' used before its declaration.ts(2448)
Part1.tsx(41, 11): 'data' is declared here

目标：那里发生了什么，我该如何解决这个问题？具体是什么原因造成的，为什么？

谢谢你的时间 ！！

更新

我已经更改了我的代码，这是出现的错误

 const { data }: multipleUsers = useSWR<user[]>(
    () => "http://localhost:5000/api/user/allU/" + userId.user.id,
    fetcher,
    ""
  );

错误

Expected 4 arguments, but got 3.ts(2554)
use-swr.d.ts(4, 99): An argument for 'Data' was not provided
4

1 回答 1

2

这是useSWR函数签名（source）：

function useSWR<Data = any, Error = any>(
  ...args:
    | readonly [Key]
    | readonly [Key, Fetcher<Data> | null]
    | readonly [Key, SWRConfiguration<Data, Error> | undefined]
    | readonly [
        Key,
        Fetcher<Data> | null,
        SWRConfiguration<Data, Error> | undefined
      ]
): SWRResponse<Data, Error>

您可以将预期的数据类型作为第一个类型参数传递，如下所示：

const { data } = useSWR<User[]>(
  () => "http://localhost:5000/api/user/allU/" + userId.user.id,
  fetcher
)

另请注意，您向函数传递了 4 个参数，但没有支持 4 个参数的覆盖，最大值为 3，但当然可以更少。

编辑：

再看一下args类型：

| readonly [Key]
| readonly [Key, Fetcher<Data> | null]
| readonly [Key, SWRConfiguration<Data, Error> | undefined]
| readonly [
    Key,
    Fetcher<Data> | null,
    SWRConfiguration<Data, Error> | undefined
  ]

只有一个变体有 3 个参数，就是这个：

readonly [
    Key,
    Fetcher<Data> | null,
    SWRConfiguration<Data, Error> | undefined
  ]

看看第三个参数类型：

SWRConfiguration<Data, Error> | undefined

甚至不检查源代码，它可能是某种对象。你通过了什么？一个空字符串："".

删除此参数或传递配置对象。

于 2021-05-23T21:09:41.513 回答