React.useEffect 少更新了一次值 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

React.useEffect 少更新了一次值

react useeffect 前端

janlin002 2022-02-10 21:23:11 ‧ 1044 瀏覽

分享至

import React, { useEffect, useState } from 'react';

const Demo1 = () =>{
  const [count, setCount] = useState('1')

  useEffect(()=>{
    setCount('2')
    setCount('3')
  }, [])

  useEffect(()=>{
    console.log(count)
  }, [count])

  return (
    <>
      <div>Demo1</div>
    </>
  )
}

export default Demo1

希望呈現的畫面:
console.log => 1, 2, 3
實際出現的畫面:
console.log => 1, 3

想請問一下，為什麼出來的是1, 3而非1,2,3?
按理來說，當count的值出現變化時，不是應該就會觸發第二個useEffect?
但試過幾次發現好像都只會顯示預設值跟最後渲染的值

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 個回答

2

Andy Chang

iT邦研究生 3 級 ‧ 2022-02-10 22:03:17

最佳解答

React的setState在React 18以前，大部份是非同步的(呼叫setState當下並不會馬上更新值)。18以後全部都會是非同步的

詳請可以參考小弟之前的文章(偷打廣告XD)
<下篇> 結論(React的setState什麼時候是同步/非同步)
<上篇> 原理(React的setState是同步/非同步的原因)

回應 3
分享
檢舉

janlin002 iT邦好手 1 級 ‧ 2022-02-10 22:52:10 檢舉

感謝你的解答，學到了

前端野人 iT邦新手 3 級 ‧ 2022-02-10 23:57:02 檢舉

還有一種情境就是state放在 return 上面跟 return (裡面) 更新的時機點也有差，之前在做 axios interceptor
hoook 時遇到的

janlin002 iT邦好手 1 級 ‧ 2022-02-11 09:14:11 檢舉

這個我倒沒想過，不過謝謝你的補充

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙