前端 - 为何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))