next.js 使用useSWR未定义的数据

y53ybaqx 于 2022-11-23 发布在其他

关注(0)|答案(1)|浏览(225)

我尝试在我的NEXT.JS应用程序中使用useSWR。首先，我在使用它的地方做了一个自定义钩子：

import useSWR from "swr";

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

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

export default function useSocialMedia() {
  const url = apiUrl + "/socialMedia";
  const { data, error } = useSWR(url, fetcher);
  console.log("data : ", data);

  return {
    socialMedia: data,
    loading: !error && !data,
    error: error,
  };
}

然后，将其导入到组件中：

import styles from "./styles/socialIcons.module.scss";
import useSocialMedia from "../../../utils/hooks/useSocialMedia";

export default function SocialIcons() {
  const { socialMedia, loading, error } = useSocialMedia();

  return (
    <div className={styles.socialIcons}>
      {loading && <p>Loading...</p>}
      {error && <p>Loading failed : {error}</p>}
      {socialMedia && <p>Here will appear my social media list</p>}
    </div>
  );
}

由于我的console.log在我的自定义钩子中，我总是有未定义的数据，所以我的组件在加载时卡住了...我不知道我的代码出了什么问题。

next.js

来源：https://stackoverflow.com/questions/74362570/data-undefined-with-useswr

1条答案

按热度按时间

ryhaxcpt1#

考虑下面的例子，你忘记了在fetcher函数中返回数据，你只使用了console.log，它没有返回任何结果。

import React from 'react';
import useSWR from 'swr';

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

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

function useSocialMedia() {
  const url = apiUrl;
  const { data, error } = useSWR(url, fetcher);

  return {
    socialMedia: data,
    loading: !data,
    error,
  };
}

export default function SocialIcons() {
  const { socialMedia, loading, error } = useSocialMedia();

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Loading failed : {error}</p>}
      {socialMedia && socialMedia.map((post) => <p>{post.title}</p>)}
    </div>
  );
}

赞(0）回复(0）举报 2022-11-23

我来回答

next.js 使用useSWR未定义的数据

1条答案

相关问题

热门标签

最新问答