React组件中监听函数获取不到最新的state问题

 更新时间:2024年01月25日 09:09:28   作者:你是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的数据。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈React useDebounce 防抖原理

    浅谈React useDebounce 防抖原理

    本文主要介绍了浅谈React useDebounce 防抖原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • React中使用TS完成父组件调用子组件的操作方法

    React中使用TS完成父组件调用子组件的操作方法

    由于在项目开发过程中,我们往往时需要调用子组件中的方法,这篇文章主要介绍了React中使用TS完成父组件调用子组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • React Hook 监听localStorage更新问题

    React Hook 监听localStorage更新问题

    这篇文章主要介绍了React Hook 监听localStorage更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react+antd select下拉框实现模糊搜索匹配的示例代码

    react+antd select下拉框实现模糊搜索匹配的示例代码

    我们在开发过程中,经常会出现下拉框数据很多得情况,本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • React错误的习惯用法分析详解

    React错误的习惯用法分析详解

    这篇文章主要为大家介绍了React错误用法习惯分析详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Iconfont不能上传如何维护Icon

    Iconfont不能上传如何维护Icon

    这篇文章主要为大家介绍了在Iconfont还是不能上传,要如何维护你的Icon,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • react实现页面水印效果的全过程

    react实现页面水印效果的全过程

    大家常常关注的是网站图片增加水印,而很少关注页面水印,其实这个需求也是比较常见的,比如公文系统、合同系统等,这篇文章主要给大家介绍了关于react实现页面水印效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • React踩坑之antd输入框rules中的required=true问题

    React踩坑之antd输入框rules中的required=true问题

    这篇文章主要介绍了React踩坑之antd输入框rules中的required=true问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • react hooks UI与业务逻辑分离必要性技术方案

    react hooks UI与业务逻辑分离必要性技术方案

    这篇文章主要为大家介绍了react hooks UI与业务逻辑分离必要性技术方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React合成事件原理解析

    React合成事件原理解析

    事件是在编程时系统内发生的动作或者发生的事情,而开发者可以某种方式对事件做出回应,而这里有几个先决条件,这篇文章主要介绍了React合成事件原理解析,需要的朋友可以参考下
    2022-07-07

最新评论