next.js 如何设置微调器加载状态？

x0fgdtte 于 2023-11-18 发布在其他

关注(0)|答案(2)|浏览(88)

我试图加载一个微调当用户点击导航到文章页面。微调应该加载，直到文章数据被提取，然后显示。有一个小延迟后，用户点击导航到页面，因此需要一个微调。
我有一个自定义的剪切器组件<Spinner />，这就是我想要的数据被提取时显示。
在什么时候我设置加载为true和false?这是我的代码;

import { useState, useEffect } from "react";

import Recent from "../../components/sections/articles/recent";

import Color from "../../components/utils/page.colors.util";

import colors from "../../content/articles/_colors.json";
import settings from "../../content/_settings.json";
import Spinner from "../../components/sections/spinner/Spinner";

//
export default function Articles({ mediumArticles }) {
  const [isLoading, setIsLoading] = useState(false);
  return (
    <>
      {isLoading && <Spinner />}
      <Color colors={colors} />
      <Recent mediumArticles={mediumArticles} />
    </>
  );
}

// This gets called on every request
export async function getServerSideProps({ res }) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=600, stale-while-revalidate=59"
  );

  console.log(settings.username.medium);

  const [mediumRSS] = await Promise.all([
    fetch(
      `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/${settings.username.medium}`
    ),
  ]);

  let [mediumArticles] = await Promise.all([mediumRSS.json()]);

  return { props: { mediumArticles } };
}

字符串

next.js

来源：https://stackoverflow.com/questions/77463065/how-should-i-set-my-spinner-loading-state

2条答案

按热度按时间

zi8p0yeb1#

你可以这样尝试：

import Color from "../../components/utils/page.colors.util";
import colors from "../../content/articles/_colors.json";
import settings from "../../content/_settings.json";
import Spinner from "../../components/sections/spinner/Spinner";
import Recent from "../../components/sections/recent/Recent";

export default function Articles({ mediumArticles, isLoading }) {
  return (
    <>
      {isLoading && <Spinner />}
      <Color colors={colors} />
      <Recent mediumArticles={mediumArticles} />
    </>
  );
}

export async function getServerSideProps({ res }) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=600, stale-while-revalidate=59"
  );

  console.log(settings.username.medium);

  try {
    const [mediumRSS] = await Promise.all([
      fetch(
        `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/${settings.username.medium}`
      ),
    ]);

    let [mediumArticles] = await Promise.all([mediumRSS.json()]);

    return {
      props: {
        mediumArticles,
        isLoading: false, 
      },
    };
  } catch (error) {
    console.error("Error fetching data:", error);
    
    return {
      props: {
        mediumArticles: null,
        isLoading: false,
      },
    };
  }
}

字符串

赞(0）回复(0）举报 2023-11-18

kyvafyod2#

你需要使用setStaticPaths函数和使用回退概念，遵循文档，这样你就可以看到它是如何应用的：https://nextjs.org/docs/pages/api-reference/functions/get-static-paths
希望对你有帮助

赞(0）回复(0）举报 2023-11-18