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>;
}

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

相关推荐
卷Java12 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
FogLetter12 小时前
前端性能救星:虚拟列表原理与实现,让你的10万条数据流畅如丝!
前端·性能优化
我是天龙_绍12 小时前
前端驼峰,后端下划线,问:如何统一?
前端
Magicman12 小时前
JavaScript-事件学习
javascript
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
code_YuJun12 小时前
nginx 配置相关
前端·nginx
对不起初见14 小时前
PlantUML 完整教程:从入门到精通
前端·后端
东方掌管牛马的神14 小时前
oh-my-zsh 配置与使用技巧
前端
你的人类朋友14 小时前
HTTP请求结合HMAC增加安全性
前端·后端·安全