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

Question

我有一个如下的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）：

控制台打印：

---

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

[3]
[3, 3]
[3, 3, 3]
[3, 3, 3, 3]
...

Answer 1

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

改成这样：

setTracerouteMsgs(prev => prev.concat(3))