React组件中监听函数获取不到最新的state问题
作者：你是KKKK呀
这篇文章主要介绍了React组件中监听函数获取不到最新的state问题问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
场景
在useEffect事件中，更新setState或者redux后获取到的state值为第一次的值，不是最新的
例如：
export default function Travel(props) {
const divRef = useRef(null)
const [count, setCount] = useState(0)
const handleClick = () => {
console.log('click',count);
}
useEffect(() => {
window.addEventListener('click', handleClick)
return () => {
window.removeEventListener('click', handleClick)
}
},[])
console.log('out',count);
return (
<div ref={divRef} >
<button onClick={() => {
setCount(count => count + 1)
}}>点击</button>
</div>
)
}又或者
const [flag,setFlag] = useState(false);
const onClick = ()=>{
setFlag(!flag)
console.log(flag)
}
useEffect(() => {
document.addEventListener('click',onClick)
}, []);原因
找了一些资料了解到
因为监听器绑定的是第一次render时生成的函数，这个函数的上下文中的state也是第一次的值，所以即便后面render了多次，因为绑定的是第一次render的函数，所以state值也是旧的。
解决方案1
useEffect(() => {
window.addEventListener('click', handleClick)
return () => {
window.removeEventListener('click', handleClick)
}
},[count])监听值的变化，绑定并解绑事件
解决方案2
const stateRef = useRef(0)
const [state,setState] = useState(stateRef.current);
const Function = ()=>{
let data = JSON.parse(JSON.stringify(stateRef));
/*功能*/
stateRef.current = newData;
setState(stateRef.current)
} 通过useRef创建变量来改变state的值
其他情况
const stateRef = useRef(null);
useEffect(() => {
if (
!stateRef.current ||
(reduxState &&
JSON.stringify(reduxState) !== JSON.stringify(stateRef.current) &&
JSON.stringify(reduxState.id) !== JSON.stringify(stateRef.current?.id))
) {
sstateRef.current = JSON.parse(JSON.stringify(reduxState));
}
}, [reduxState]);比方说redux缓存了一串数据，这个数据用于控制物体移动，就可以监听redux state,将值赋值给stateRef。
需要注意防止重复赋值，不然会造成抖动。
判断是否数据无变化，判断是否切换了redux的数据。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。