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的数据。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
react+antd select下拉框实现模糊搜索匹配的示例代码
我们在开发过程中,经常会出现下拉框数据很多得情况,本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-01-01React踩坑之antd输入框rules中的required=true问题
这篇文章主要介绍了React踩坑之antd输入框rules中的required=true问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06
最新评论