Блог

Я пытаюсь создать панель мониторинга данных covid-19 в реальном времени с помощью React. Данные поступают из desease.sh api и глобальные показатели регулярно меняются, поэтому я отправляю новый запрос в конечную точку api, чтобы получить новые данные с помощью setInterval через минуту. Но когда происходит этот новый запрос, данные в моем приложении не меняются.

Ниже приведен мой код для api disease. Который работает не так, как ожидалось

 function CoolTest() {
    const [data, setData] = useState([]);

    const getData = async () => {
        try {
            const data = await axios.get("https://disease.sh/v3/covid-19/all");
            setData(data.data);

        } catch (e) {
            console.log(e)
        }
    };    
    
    useEffect(() => {
        getData();
        setInterval(()=>{
            getData();
            setData(data => data)            
    }, 120000)
    }, []);

    console.log(data.todayCases)       

    
    return (
        <Container style={{marginTop:'15px'}}>
            <h3>New Cases</h3>
            <p className="text-muted"> {data.todayCases}</p>
            <hr />
        </Container>
    )
}
 

Затем, используя тот же код, я попытался сделать запрос к api шуток Чака Норриса, который работает. Шутка меняется после каждого нового запроса.

 function CoolTest() {
    const [jokes, setJokes] = useState([]);

    const getJokesData = async () => {
        try {
            const data = await axios.get("https://api.chucknorris.io/jokes/random");
            setJokes(data.data);

        } catch (e) {
            console.log(e)
        }
    };    
    
    useEffect(() => {
        getJokesData();
        setInterval(()=>{
            getJokesData();
            setJokes(jokes => jokes)            
    }, 120000)
    }, []);

    console.log(jokes.value)   

    
    return (
        <Container style={{marginTop:'15px'}}>
            <h3>Chuck Norris Jokes</h3>
            <p className="text-muted"> {jokes.value}</p>
            <hr />
        </Container>
    )
}
 

Чего мне не хватает?

Скриншот Concole. введите описание изображения здесь

Данные не меняются, потому что новые данные совпадают с предыдущими.

вы можете изменить:

 const data = await axios.get("https://disease.sh/v3/covid-19/all");
setData(data.data);
 

Для

 const data = await axios.get("https://disease.sh/v3/covid-19/all");
setData({ todayCases: Math.random() });
 

чтобы увидеть, что представление меняется.

в вашем втором коде имя api api.chucknorris.io/jokes/random

и каждый раз выдает вам случайное число, которое не равно предыдущему.

вы можете увидеть результаты этой песочницы

а также изменить:

       setInterval(()=>{
            getJokesData();
    }, 120000)
 

Для:

       setInterval(()=>{
            getJokesData();
            setJokes(jokes => jokes)            
      }, 120000)```