Javascript 使用nextjs和hooks设置间隔

我正在尝试使用nextjs和hook实现加载。 我必须每3分钟进行一次抓取以检查新信息，当这是附加信息时，我想使用加载。 我创建了一个setLoading，它从false开始，在setIntervar传递到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;

import React，{useState，useffect}来自“React”；
从“../../config/Context”导入上下文；
从“./../helper/index”导入{checkNewData}；
函数Home（）{
const[contentLoading，setLoading]=useState（false）；
const data=context.events[0]；
useffect（（）=>{
设置间隔（（）=>{
如果（data.live==false）{
设置加载（真）；
checkNewData（）；
}
设置加载（错误）
}, 10000);
返回(
{contentLoading？加载
：不加载

);
}
导出默认主页；

好的，这里是工作时间间隔

（每3秒调用一次api，并计算它的工作次数（仅供参考）

在负责Api调用的函数中应打开加载程序-然后每隔3秒再次调用数据

---

const Home=（道具）=>{
const[loading，setLoading]=useState（false）；
const[check，setCheck]=useState（0）
常量callApi=（）=>{
在这里，您应该调用api+集合加载器
如果获取（设置加载（真））
如果获取（设置加载（错误））
}
useffect（（）=>{
常量id=setInterval（（）=>{
callApi（）
设置检查（检查+1）
}, 3000);
return（）=>clearInterval（id）；
}，[检查]）
返回(
{加载？加载
：不加载
}
时间检查执行{check}

);
}

好的，这里是工作时间间隔

（每3秒调用一次api，并计算它的工作次数（仅供参考）

在负责Api调用的函数中应打开加载程序-然后每隔3秒再次调用数据

---

const Home=（道具）=>{
const[loading，setLoading]=useState（false）；
const[check，setCheck]=useState（0）
常量callApi=（）=>{
在这里，您应该调用api+集合加载器
如果获取（设置加载（真））
如果获取（设置加载（错误））
}
useffect（（）=>{
常量id=setInterval（（）=>{
callApi（）
设置检查（检查+1）
}, 3000);
return（）=>clearInterval（id）；
}，[检查]）
返回(
{加载？加载
：不加载
}
时间检查执行{check}

);
}

这是根本错误的；您将设置大量的间隔，因为每次组件重新加载时，传递给useEffect的函数都将再次被调用。此外，useEffect不用于修改状态，而是在每次渲染后调用。这是根本错误的；您将设置大量的间隔，因为每次组件重新加载时onent rerenders，传递给useEffect的函数将再次被调用。此外，useEffect不用于修改状态，而是在每次渲染后调用。我尝试了你的示例，从未显示加载文本。表示“未加载”已编辑-加载或未加载取决于状态（如果useData为true，则存在加载）现在-它已经改变了-你应该在callApi函数内部设置加载我想OK，但是我的callApi fn它不在我的家里，在一个外部文件中..它是一个帮助器sou，我可以把它放在这里：

if fetching（setLoading（true））if fetched（setLoading（false））if fetched（setLoading（false））

，谢谢！好的，这个基于模式和体系结构的决策应该基于您的模式和体系结构。您可以通过redux传递状态，也可以向上| | |向下提升状态。您还可以导入/导出模块。另外，如果抓取和如果抓取是伪代码，则说明何时应该调用更改负责加载程序的状态的函数。我尝试了您的示例，但从未尝试过ows加载文本..表示“不加载”已编辑-加载或不加载取决于当前状态（如果useData为true，则存在加载）-它已更改-您应该在callApi函数内设置加载我认为OK，但我的callApi fn它不在我家中，在外部文件中..它是一个帮助程序，我可以在其中放置以下内容：

如果获取（设置加载（true））如果获取（设置加载（false））

，谢谢！好的，这个决策应该基于您的模式和体系结构。您可以通过redux传递状态，也可以向上| | |向下提升状态。您还可以导入/导出模块。另外，如果fetching&如果fetched是伪代码，则说明何时应该调用更改负责加载程序的状态的函数。

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>
        );
    }