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

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

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

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

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

useEffect 也得 watch timeDate

@joesonw #5
solved, thanx

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])

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

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

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

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

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

react hooks 闭包陷阱

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

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

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

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