setInterval используя next js и перехватывает

Question

Я собираюсь осуществить загрузку, используя следующие js и крючки. Я должен делать выборку, чтобы проверять новую информацию каждые 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;

Answer 1

Хорошо, так что здесь у вас есть рабочий интервал

(Каждые 3 се c вызов API, и подсчитывает, сколько раз это работает (не нужно только FYI)

В ответственной функции для вызова 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>
        );
    }