swr或useSWR如何在reactjs / nextjs中正常工作?

Question

在第一部分中，我使用fetch()，它工作正常，但当我使用useSWR()时，它返回UNDEFINED

export const getAllEvents = async()=>{
const response = await fetch('https://*******-rtdb.firebaseio.com/events.json');
const data = await response.json();
const events = [];
for (const key in data){
events.push({
id:key,
...data[key]
});
}
return events; // returns data as I wanted.. perfect
}

但是在下面的代码片段中，它返回undefined(相同的url)

import useSWR from 'swr';
const {data, error} = useSWR('https://*******-rtdb.firebaseio.com/events.json');
console.log(data);  // returns undefined

Answer 1

useSWR期望fetcher函数作为第二个参数:

https://swr.vercel.app/概述可以是自定义方法，例如

export const fetcher = async (...args: Parameters<typeof fetch>) => {
const res = await fetch(...args);
if (!res.ok) {
throw { status: res.status, statusText: res.statusText };
}
return res.json();
};

Answer 2

Use swr也需要一个fetcher函数，现在你只是传递一个url。Swr不知道该怎么处理这个url.

const { data, error } = useSWR(
"https://api.github.com/repos/vercel/swr",
fetcher
);

const fetcher = (url) => fetch(url).then((res) => res.json());

我建议你看一下文档。

Answer 3

add this:

const fetcher = (...args) => fetch(...args).then(res => res.json())
const {data, error} = useSWR('https://*******-rtdb.firebaseio.com/events.json', fetcher);