setTimeout React钩子内的API调用显示一个过时的值

Question

我有一个自定义挂钩，用于每5秒调用一次API。以下代码有效，但resconsole.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])
}

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()}`)

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