javascript - 如何在反应中使用 swr 返回数据？

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;

问题是它卡在加载中并且数据不会得到更新并且是未定义的，提取器中的数据控制台日志似乎也可以正常工作。

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

Answer 1

你应该从而不是-ing 数据返回res.data。fetcherFuncconsole.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);