如何在response中使用swr返回数据

Question

我尝试显示数据，并使用带有react的swr数据获取，下面是代码：

import useSWR from "swr";
import axios from "axios";
const fetcherFunc = (...args) => {
return axios(...args).then((res) => console.log(res.data));
};
function MyComponent() {
const { data, error } = useSWR(
"https://jsonplaceholder.typicode.com/posts/",
fetcherFunc
);
if (error) return <div>failed to load</div>;
if (!data) return <div>loading...</div>;
return <div>{JSON.stringify(data)}</div>;
}
export default MyComponent;

问题是它在加载时被卡住了，数据不会得到更新，而且没有定义，而且fetcher中数据的控制台日志似乎也能工作。

如何在react中使用swr获取数据并显示获取的数据？

Answer 1

您应该从fetcherFunc返回res.data，而不是从console.log返回数据。

此外，只需使用url作为fetcherFunc的参数名称，并将该url传递给axios.get(不要在url上使用...url扩散运算符(。看看如何使用Axios进行数据获取(传递url、方法、负载等(。

获取数据的函数应该如下所示：

const fetcherFunc = (url) => axios.get(url).then((res) => res.data);

对于useSWR挂钩，使用方式如下：

const { data, error } = useSWR("https://jsonplaceholder.typicode.com/posts/", fetcherFunc);