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

Question

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

我想将配置作为参数传递给 fetcher。我在文档中阅读了有关多个参数的内容

但由于某种原因它没有返回数据。它正在发出 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
);

Answer 1

经过很长时间的调试我发现了。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);