请问下,为何不能`setTracerouteMsgs(prev => {xxx}` 这样设置状态呢?

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

请问下,为何不能setTracerouteMsgs(prev => {xxx} 这样设置状态呢?

const [tracerouteMsgs, setTracerouteMsgs] = useState<TraceRouteMsg[]>([])

useEffect(() => {
  console.log('result: ', tracerouteMsgs)  // 这里不打印
}, [tracerouteMsgs])
...

 <div>
    <Button onClick={() => {

      const tmpTracerouteMsgs = tracerouteMsgs

      tmpTracerouteMsgs.push({
        key: tracerouteMsgs.length + 1,
        msg: []
      })

      setTracerouteMsgs(tmpTracerouteMsgs)

      const key = tracerouteMsgs.length

      global.ipcRenderer.send('traceroute-from-render', '8.8.8.8', key)

      global.ipcRenderer.on(`traceroute-from-main-${key}`, (_, data) => {
        console.log('mmkk: ', key, data)
        setTracerouteMsgs(prev => {
          const tmpPrev = prev 
          tmpPrev[1].msg =  tmpPrev[1].msg.concat(data)
          console.log('tmpPrev2:', tmpPrev)
          return tmpPrev
        })
      })

    }}>traceroute2测试</Button>

    <span>tracetoute2结果:</span>

    {
      tracerouteMsgs[1]?.msg.map((item, index) => (
       <>
        <span key={index}>{item}</span> <br/>
       </>
      )) 
    }    
</div>

主要是这段代码的setTracerouteMsgs貌似不生效:

setTracerouteMsgs(prev => {
  const tmpPrev = prev 
  tmpPrev[1].msg =  tmpPrev[1].msg.concat(data)
  console.log('tmpPrev2:', tmpPrev)
  return tmpPrev
})

是否不应该 return tmpPrev 还是怎么的呢?

我测试了简单的数据结构设置如:

const [tracerouteMsgs, setTracerouteMsgs] = useState([])
...
setTracerouteMsgs(prev => prev.concat(3))

这样可以生效。

但是为何修改内部的内容再设置就不生效呢?

回复
1个回答
avatar
test
2024-06-29
setTracerouteMsgs(prev => {
  const tmpPrev = [...prev];
  tmpPrev[1] = {
    ...tmpPrev[1],
    msg: tmpPrev[1].msg.concat(data)
  };
  console.log('tmpPrev2:', tmpPrev);
  return tmpPrev;
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容