React在定时器中无法获取状态最新值的问题

 更新时间:2022年08月08日 14:46:45   作者:前端常春藤  
这篇文章主要介绍了React在定时器中无法获取状态最新值的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在定时器中无法获取状态最新值

在做轮播图组件时发现了一个问题,在setInterval中无法通过状态直接获取最新值,如:

const [rightTransform, setRightTransform] = useState(pictureSize);

const autoPlay = () => {        //普通轮播自动播放
    timer.current = setInterval(() => {
      let oldState = rightTransform;
      console.log('老状态', oldState)			//始终只会打印初始的pictureSize
      setRightTransform(o => {
        const newState = JSON.parse(JSON.stringify(o));
        return newState >= (renderImgList.length) * pictureSize ? 0 : newState + pictureSize
      })
	}, 1000);
}

问题原因

定时器一直都没有被清除,因此获取的状态始终是定时器被创建时候的状态。

问题解决

从代码和图片可以看到,定时器中打印的状态永远都是初始值,后面所改变的值虽然更新了,页面也发生了变化,但是我们从log中无法获取到实时状态。

解决办法很简单:

第一种,就是在setState中获取上一次状态,因为useState hooks提供了记录上一次状态的缓存回调,可以在这个回调中获取上一轮状态

如图:

timer.current = setInterval(() => {
      let oldState = rightTransform;
      setRightTransform(o => {
        console.log('在setState中的老状态', o)
        const newState = JSON.parse(JSON.stringify(o));
        return newState >= (renderImgList.length) * pictureSize ? 0 : newState + pictureSize
      })
      console.log('直接打印老状态', oldState)
}

ReactHook hooks和定时器产生的bug

问题1

使用定时器改变state,state的值并不是最新值

例:

 const _onClick = function ()
 {
   setInterval(() => {
     console.log(value);
     setValue(value + 1);
   },1000)
 }

产生原因:因为每次setValue后会重新创建函数,由于并没有及时清理掉setInterval,setInterval执行的上下文环境都是第一次创建本函数式组件的上下文(所以value值不会超过1)

解决方案        

方案一:

setInterval(() => {
     console.log(value);
     setValue(v=>v+1);      函数式的setValue会保存上一次的值,所以会取得最新值,该方式指定state该如何改变而不用引用当前state
   },1000)

    

方案二:

useEffect(() => {
     const id = setInterval(() => {
         valf.current++;    不一定是ref操作,正常set操作即可
       }, 1000);
       return () => clearInterval(id);
   }, []);

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

相关文章

  • React样式冲突解决问题的方法

    React样式冲突解决问题的方法

    本文主要介绍了React样式冲突解决问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • React Native 启动流程详细解析

    React Native 启动流程详细解析

    这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下
    2021-08-08
  • Ant Design与Ant Design pro入门使用教程

    Ant Design与Ant Design pro入门使用教程

    Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用,这篇文章主要介绍了Ant Design与Ant Design pro入门,需要的朋友可以参考下
    2023-12-12
  • React useEffect使用教程

    React useEffect使用教程

    useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
    2022-10-10
  • react-router-domV6版本的路由和嵌套路由写法详解

    react-router-domV6版本的路由和嵌套路由写法详解

    本文主要介绍了react-router-domV6版本的路由和嵌套路由写法详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • ReactNative实现图片上传功能的示例代码

    ReactNative实现图片上传功能的示例代码

    本篇文章主要介绍了ReactNative实现图片上传功能的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-07-07
  • React + webpack 环境配置的方法步骤

    React + webpack 环境配置的方法步骤

    本篇文章主要介绍了React + webpack 环境配置的方法步骤,详解的介绍了开发环境的配置搭建,有兴趣的可以了解一下
    2017-09-09
  • React18的useEffect执行两次如何应对

    React18的useEffect执行两次如何应对

    这篇文章主要给大家介绍了关于React18的useEffect执行两次如何应对的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用React具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    这篇文章主要介绍了基于react hooks,zarm组件库配置开发h5表单页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React-redux实现小案例(todolist)的过程

    React-redux实现小案例(todolist)的过程

    这篇文章主要为大家详细介绍了React-redux实现小案例(todolist)的过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论