reactjs 使用Next.js和挂接设置间隔

r8xiu3jd 于 2022-11-29 发布在 React

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

我正在尝试使用Next.js和hooks实现一个加载器。
我必须每隔3分钟执行一次提取来检查新数据，当这种情况发生时，我希望使用加载状态。
我创建了一个setLoading，它从false开始，在setInterval传递到true的内部，但我不知道为什么不工作。
下面是我的代码：

import React, { useState, useEffect } from "react";
import Context from "../../config/Context";
import { checkNewData } from "../../helper/index";

function Home() {

  const [contentLoading, setLoading] = useState(false);
  const data = context.events[0];

  useEffect(() => {
    setInterval(() => {
      if (data.live == false) {
        setLoading(true);
        checkNewData();
      }
      setLoading(false)
    }, 10000);

  return (
    <React.Fragment>
      {contentLoading ? <p>loading</p> : <p>no loading</p>
    </React.Fragment>
  );
}

export default Home;

reactjs

来源：https://stackoverflow.com/questions/59779473/setinterval-using-next-js-and-hooks

2条答案

按热度按时间

ehxuflar1#

好了，这里是工作间隙
（每3秒调用一次API，并计算其工作次数（仅供参考）
在负责Api调用的函数中，您应打开加载程序-然后每3秒再次调用数据

const Home = (props) => {

        const [loading, setLoading] = useState(false);
        const [check, setCheck] = useState(0)

        const callApi = () => {
            Here you should call your api + set loader
            if fetching(setLoading(true))
            if fetched(setLoading(false))
        }

        useEffect(() => {
            const id = setInterval(() => {
                callApi()
                setCheck(check + 1)
            }, 3000);
            return () => clearInterval(id);
        }, [check])

        return (
            <React.Fragment>
                {loading ? <p>Loading</p> : <p>No Loading</p>}
                <p>Times check execute {check}</p>
            </React.Fragment>
        );
    }

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

mqkwyuun2#

一个更好的方法是使用SWR这样的插件，它可以无缝地处理数据获取甚至加载状态。https://swr.vercel.app

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