如何 return data with swr in react？

Question

我尝试显示数据，我使用带有反应的 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 return res.data 而不是 console.log 获取数据。

此外，只需使用 url 作为 fetcherFunc 的参数名称并将 url 传递给 axios.get（不要使用 ...url url 上的传播运算符）。看看 How To Use Axios for Data Fetching（传递 url、方法、有效负载等）。

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

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

至于useSWR钩子，这样使用：

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

如何 return data with swr in react？

How to return data with swr in react?

javascript

reactjs

axios

swr