React state在setInterval里未获取最新值的问题

目录

一、问题描述

二、解决方案

方案一,使用函数式更新

[方案二,使用 useRef 保存最新值](#方案二,使用 useRef 保存最新值)


一、问题描述

在 React 中,当在 setInterval或setTimeout 中使用 setState 时,经常会遇到状态不是最新值的问题。这是因为闭包导致的,setInterval 回调函数捕获的是初始状态值。

二、解决方案

方案一,使用函数式更新
javascript 复制代码
useEffect(() => {
  const interval = setInterval(() => {
    // 使用函数式更新,获取最新的状态
    setCount(prevCount => prevCount + 1);
  }, 1000);
  
  return () => clearInterval(interval);
}, []);
方案二,使用 useRef 保存最新值
javascript 复制代码
import { useState, useEffect, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 保持 ref 与状态同步
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  useEffect(() => {
    const interval = setInterval(() => {
      // 通过 ref 获取最新值
      setCount(countRef.current + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <div>计数: {count}</div>;
}

以上解决方案可解此问题。

相关推荐
文火冰糖的硅基工坊2 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088503 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili3 小时前
用 Tinymce 打造智能写作
前端
angelQ3 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla3 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办3 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao3 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
云中雾丽3 小时前
React.forwardRef 实战代码示例
前端
朝歌青年说3 小时前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
高台树色3 小时前
终于记住Javascript垃圾回收机制
javascript