Javascript 如何在React useEffect钩子中获取更新的状态值

Javascript 如何在React useEffect钩子中获取更新的状态值,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我正在收听分页功能函数中的滚动事件。滚动事件在useffecthook中调用。当启动scroll事件时,我想用一个已设置为state的值进行HTTP调用,如果HTTP请求成功,则更新该值 但是,每当触发事件时,它只使用处于状态的项的初始值,即使该值已更新,并且我可以在函数外部看到更新后的值 如何在onScroll回调中获取更新的值 下面是一段代码片段 const[test,setTest]=useState(0); //下面注释掉的代码之所以有效,是因为它不在useffect内部 //windo

我正在收听分页功能函数中的滚动事件。滚动事件在
useffect
hook中调用。当启动scroll事件时,我想用一个已设置为state的值进行HTTP调用,如果HTTP请求成功,则更新该值

但是,每当触发事件时,它只使用处于状态的项的初始值,即使该值已更新,并且我可以在函数外部看到更新后的值

如何在onScroll回调中获取更新的值

下面是一段代码片段

const[test,setTest]=useState(0);
//下面注释掉的代码之所以有效,是因为它不在useffect内部
//window.addEventListener('scroll',()=>requestAnimationFrame(()=>{
//控制台日志(测试);
//设置测试(测试+1);
// }));
useffect(()=>{
window.addEventListener('scroll',()=>requestAnimationFrame(()=>{
console.log(test);//这始终返回0
设置测试(测试+1);
}));
}, [])
console.log(测试);//这将返回更新/正确的值。

通过提供一个空数组作为效果的第二个参数,您已经告诉react永远不要重新创建此效果。所以它只发生一次,它的闭包中的变量永远不会改变

选项1:

您可以通过删除依赖项数组或使用您关心的变量填充它来获得重新运行的效果。由于这将导致该效果多次运行,因此还需要提供一个清理功能来拆除以前的效果

useEffect(() => {
  const callback = () => requestAnimationFrame(() => {
    setTest(test + 1);
  })
  window.addEventListener('scroll', callback);
  return () => window.removeEventListener('scroll', callback);
}) // <------
useffect(()=>{
常量回调=()=>requestAnimationFrame(()=>{
设置测试(测试+1);
})
addEventListener('scroll',回调);
return()=>window.removeEventListener('scroll',callback);
}) //  {
常量回调=()=>requestAnimationFrame(()=>{
setTest(prev=>prev+1);//window.removeEventListener('scroll',callback);
}, [])

通过提供一个空数组作为效果的第二个参数,您告诉react永远不要重新创建此效果。因此它只发生一次,其闭包中的变量永远不会改变

选项1:

您可以通过删除依赖项数组或使用您关心的变量填充该数组来获得重新运行的效果。由于这将导致该效果多次运行,因此您还需要提供一个清除函数来删除以前的效果

useEffect(() => {
  const callback = () => requestAnimationFrame(() => {
    setTest(test + 1);
  })
  window.addEventListener('scroll', callback);
  return () => window.removeEventListener('scroll', callback);
}) // <------
useffect(()=>{
常量回调=()=>requestAnimationFrame(()=>{
设置测试(测试+1);
})
addEventListener('scroll',回调);
return()=>window.removeEventListener('scroll',callback);
}) //  {
常量回调=()=>requestAnimationFrame(()=>{
setTest(prev=>prev+1);//window.removeEventListener('scroll',callback);
}, [])