Вызов API внутри ловушки setTimeout React отображает устаревшее значение - PullRequest
Новая
       81

Вызов API внутри ловушки setTimeout React отображает устаревшее значение

0 голосов
/ 14 июля 2020

У меня есть специальный хук для вызова API каждые 5 секунд. Следующий код работает, но res console.log каждый раз имеет одно и то же значение. Я ожидаю, что он покажет обратный отсчет времени. Я проверил, что API работает - если я нажму на него каким-либо другим способом, я каждый раз вижу другое значение.

Я использую библиотеку use-http для моего вызова useFetch. 

const useSession = () => {

  const request = useFetch('', { headers: getHeaders() })

  const checkTime = () => {
    console.log('calling')
    request.get('/api/users/session/status/')
      .then(res => {
        console.log('res: ', res)
        // update state here
      })
      .catch(err => console.log(err))
  }

  useEffect(() => {
    const timeout = setTimeout(() => checkTime(), 5000)
    return () => clearTimeout(timeout)
  }, [request, checkTime])

}

Ответы [ 3 ]

0 голосов
/ 15 июля 2020

Попробуйте следующее: 

import React, { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    (async function getStatus() {
      const res = await fetch('https://jsonplaceholder.typicode.com/users');
      const json = await res.json();

      setTimeout(getStatus, 5000);
      console.log('ran', json);
    })();
  }, []);
  return <div>See console</div>;
}

Ссылка на живую демонстрацию: https://stackblitz.com/edit/react-ixhjtb

0 голосов
/ 15 июля 2020

Браузер кэшировал запрос - в конце концов я смог обойти это, добавив метку времени в качестве параметра URL: 

const timestamp = new Date()
request.get(`/api/users/session/status/?=${timestamp.getTime()}`)

Я пытался изменить заголовки запросов, связанных с кешем, но ни одного казалось, имеет какое-то влияние.

0 голосов
/ 15 июля 2020

Попробуйте использовать checkTime внутри вашего useEffect.

...