useSWR - 如何传递配置对象来获取

如何解决useSWR - 如何传递配置对象来获取

我正在尝试将 useSWR 集成到我正在处理的下一个 js 项目中。

我想将配置作为参数传递给 fetcher。我在 docs

中阅读了有关多参数的内容

但由于某种原因它没有返回数据。它正在发出 api 请求，我可以在网络选项卡中看到。

不知道该怎么做。

有什么建议吗？

const fetcher = async (url,config) => {
  let res;

  if (config) {
    res = await fetch(url,config);
  } else {
    res = await fetch(url);
  }

  if (!res.ok) {
    const error = new Error('An error occurred while fetching the data.');

    error.info = await res.json();
    error.status = res.status;
    throw error;
  }

  return res.json();
};

const { data,error } = useSWR(
  [
    rolesUrl,{
      headers: {
        Authorization: `Bearer ${user.token}`,'Content-Type': 'application/json',},],fetcher
);

解决方法

经过长时间的调试，我发现了。 fetch 正在获取配置对象。

然后向api发出请求。然后 useSWR 返回响应。这会导致组件重新渲染。配置对象被重新创建。

useSWR 认为参数已更新并再次发出 api 请求。这就是我们无法获取数据的原因。

我已经用 useMemo 钩子修复了这个问题

const config = useMemo(
  () => ({
    headers: {
      Authorization: `Bearer ${user.token}`,'Content-Type': 'application/json',},}),[user.token]
);

const { data,error } = useSWR([rolesUrl,config],fetcher);