为何setInterval() 方法,为何没有增加设置state内容呢?

作者站长头像
站长
· 阅读数 9

我有一个如下的React测试代码:

const [tracerouteMsgs, setTracerouteMsgs] = useState([])

useEffect(() => {
    console.log('result: ', tracerouteMsgs)
}, [tracerouteMsgs])


...

<Button onClick={() => {

  setInterval(() => {
    const tempTracerouteMsgs = tracerouteMsgs.concat(3)
    setTracerouteMsgs(tempTracerouteMsgs)
  }, 1000)

}}>traceroute测试</Button>

<span>tracetoute结果:</span>

{
  tracerouteMsgs.map((item, index) => (
    <span key={index}>{item}</span>
  ))
}

当我在点击按钮的时候(这里只显示3):

为何setInterval() 方法,为何没有增加设置state内容呢?

控制台打印:为何setInterval() 方法,为何没有增加设置state内容呢?


这里没有符合预期,预期是想要应该是这样才对

[3]
[3, 3]
[3, 3, 3]
[3, 3, 3, 3]
...
回复
1个回答
avatar
test
2024-06-29

首次点击按钮时,click函数里持有的tracerouteMsgs的值是初始化拿到的[], 即使调用setTracerouteMsgs后更新tracerouteMsgs的值,但函数里面的仍然是最初是[],因此你打印出来的结果一直都是[3]

改成这样:

setTracerouteMsgs(prev => prev.concat(3))
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容