场景:在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的数据。
有其他优雅的方法,希望大佬们可以留言。