setTimeout React挂钩中的API调用显示过时的值。

Question

我有一个自定义的钩子，可以每隔5秒调用一次API。下面的代码可以工作，但res console.log每次都是相同的值。我希望它能显示倒计时。我已经验证了API是否正常工作-如果我以任何其他方式点击它，我每次都会看到一个不同的值。

我在useFetch调用中使用了use-http库。

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])

}

Answer 1

尝试在useEffect中使用checkTime。

Answer 2

试试这个：

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

Answer 3

浏览器正在缓存请求--最后我可以通过添加一个时间戳作为URL参数来解决这个问题：

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

我确实尝试过修改与缓存相关的请求头，但似乎都没有任何效果。