setInterval 等读取不到 useState 最新值的问题你们怎么解决？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1083 天前的主题，其中的信息可能已经有所发展或是发生改变。

如下，增加一个 timeDateG 不是最优雅的方式吧？

import { useEffect, useState } from "react" let timeDateG = '00:00:00' const UseStateIssue = () => { const [timeDate, setTimeDate] = useState('00:00:00') useEffect(()=>{ timeDateG = timeDate }, [timeDate]) useEffect(()=>{ const interval = setInterval(()=>{ console.log('timeDate', timeDate) // 一直是 '00:00:00' console.log('timeDateG', timeDateG) // 解决方法 1 }, 2000) return () => clearInterval(interval) }, []) return ( <div> <div>{timeDate}，这里正常刷新</div> <button OnClick={()=>{ setTimeDate(new Date().toLocaleTimeString()) }}>setTimeDate</button> </div> ) } export default UseStateIssue

第 1 条附言 2022-10-23 18:26:00 +08:00

按照 5 楼 @joesonw 的方式解决了，这个貌似最简洁

16 条回复 2023-03-03 09:34:14 +08:00

headsteins

2022-10-23 12:01:12 +08:00

使用 useRef 获取 state 的最新值吗？猜测可以用 ref.current = state 这样应该

estk

2022-10-23 12:45:56 +08:00

@headsteins #1
也有考虑过 useRef ，感觉这样跟多个全局变量差别不大

kkocdko

2022-10-23 13:04:56 +08:00

因为 hook 每次渲染都重新执行一遍，所以获取的是之前的闭包的值。useRef 是解决此类问题的惯用法。

cutpictureboyxx

2022-10-23 13:10:18 +08:00

useEffect(()=>{
const interval = setInterval(()=>{
console.log('timeDate', timeDate) // 一直是 '00:00:00'
console.log('timeDateG', timeDateG) // 解决方法 1
}, 2000)
return () => clearInterval(interval)
}, [timeDate, timeDateG])

joesonw

2022-10-23 13:11:21 +08:00 via iPhone

useEffect 也得 watch timeDate

estk

2022-10-23 13:26:30 +08:00

@joesonw #5
solved, thanx

ragnaroks

2022-10-23 13:26:59 +08:00

idiot:
const [timeDate, setTimeDate] = useState('00:00:00')

useEffect(()=>{
const interval = setInterval(()=>{
console.log(timeDate)
}, 2000)
return () => clearInterval(interval)
}, [timeDate])

kid:
const [timeDate, setTimeDate] = useState('00:00:00')
const ref1 = useRef(timeDate)

useEffect(()=>{
const interval = setInterval(()=>{
console.log(ref1.current)
}, 2000)
return () => clearInterval(interval)
}, [ref1])

legend:
const [timeDate, setTimeDate] = useState('00:00:00')

useEffect(()=>{
const interval = setInterval(()=>{
setTimeDate((prev)=>console.log(prev))
}, 2000)
return () => clearInterval(interval)
}, [setTimeDate])

ragnaroks

2022-10-23 13:28:04 +08:00

setTimeDate((prev)=>console.log(prev))
修正为：
setTimeDate(function(prev){
console.log(prev);
return prev;
})

TWorldIsNButThis

2022-10-23 13:31:31 +08:00

@estk 这是 anti-pattern 因为每次重新渲染都清除了上一个 interval 创建了一个新的 interval

TWorldIsNButThis

2022-10-23 13:37:37 +08:00

@estk
这个问题的本质是闭包捕获了一个变量，但是由于每次重新渲染都生成了新的变量，因此导致捕获的变量其实只有这个闭包在使用它
正确的做法就是让闭包捕获一个不变的引用，然后每次值变化同步修改引用的值，也就是 useRef

darkengine

2022-10-23 15:59:20 +08:00

https://devtrium.com/posts/set-interval-react

项目里用到的时候看了这篇，有码也有讲解。

dcsuibian

2022-10-23 16:14:05 +08:00

react hooks 闭包陷阱

oppddd

2022-10-23 16:32:49 +08:00

@estk 这个组件如果第二次使用就会出问题

hzxxx

2022-10-23 23:55:24 +08:00

我觉得这逻辑不太对，你认同的解决方式，它只是获取到最新的 timeDate ，但是 setInterval 是最后一次更新 timeDate 之后的 2s 执行，但是你代码表达的就是不管 timeDate 更新多少次，我只要组件挂载了，就要在挂载的 setInterval2s 后获取到最新的 timeDate 。

linkopeneyes

2022-10-24 15:29:43 +08:00

react 实在太累了，如果有的选我宁愿 solidjs

realJamespond

2023-03-03 09:34:14 +08:00

回调里
```
setTimeDate(prev=>prev)
prev 就是最新值
```