嵌套函数内部的ReactJs状态不被更新，但它在外部(在功能组件中)更新

Question

我正在尝试使用setInterval以一定的间隔发送get请求。所以我的脚本是这样的:

const [package_id, setPackageId] = useState({id: 1, result: NaN})
async function get_images(detail_id){ 
axios.get('http://127.0.0.1:8000/get_images', {params: {detail_id}, headers:{
'Cache-Control': 'no-cache',
'Pragma': 'no-cache',
'Expires': '0',
}}).then((res) =>{
... // some processing
setPackageId(prevstate => {return {...prevstate, id :prevstate.id + 1}})

}
).catch(errs => {
console.log(errs)
})
}
useEffect(() => {
const request_interval = setInterval(get_images, 2000, package_id.id)
return () => clearInterval(request_interval);
}, [])

即使状态package_id。id正在更新(我使用useEffect检查)。在get_images函数中，它的值总是相同的。如何使用更新后的state值?

PS:我也试图访问函数内部的状态(不传递参数(detail_id))，但它也没有工作。

如有任何帮助，不胜感激。

Answer 1

我认为你想传递package_id。
但是您没有添加package_id。id作为useEffect
中的一个依赖项，所以你每次都传递相同的id
，因为这里的效果不听id更新
。id作为依赖项
，效果将继续侦听id更新，效果将继续被触发
所以你可以尝试这个
，希望这对你有帮助

const [package_id, setPackageId] = useState({id: 1, result: NaN})
const get_images = useCallback(async () =>{
axios.get('http://127.0.0.1:8000/get_images', {params: {package_id.id}, headers:{
'Cache-Control': 'no-cache',
'Pragma': 'no-cache',
'Expires': '0',
}}).then((res) =>{
... // some processing
setPackageId(prevstate => ({...prevstate, id :prevstate.id + 1}))

}).catch(errs => {
console.log(errs)
})
}, [package_id])
useEffect(() => {
const request_interval = setInterval(get_images, 2000)
return () => clearInterval(request_interval);
}, [get_images])