反應：useEffect()在回應從我呼叫的函式到達之前觸發嗎？-有解無憂

useEffect 是否在回應data到達之前觸發，因此在undefined不久之后獲得正確資料之前我立即獲得的原因是什么？

我的邏輯是

LoginScreen并設定token（jwt）
定義isLoggedIn狀態然后有條件地渲染HomeScreen
使用提供的JWTHomeScreen隨叫隨到getUserDetails()

HomeScreen：

const {token, userInfo} = useContext(LoginContext)
const [stateUserInfo, setStateUserInfo] = userInfo
const [stateToken, setStateToken] = token

async function getUserDetails() {      
    const data = await axios.get(apiValidate '&JWT=' stateToken)
    setStateUserInfo(data.data.data) //does this line run regardless if the response arrives or not?
}

useEffect(() => {
    getUserDetails()
},[])

useEffect(() => {
    console.log(stateUserInfo) //returns undefined 1st, then the proper object shortly after
},[stateUserInfo])

我通過以下方式“修復”我的代碼：

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

這有效，但我認為它很難看？

在一個更深層次的問題上，我覺得我正在嘗試用異步資料做“同步”邏輯！有沒有更優雅的方法來做到這一點？也許我的邏輯有缺陷？

uj5u.com熱心網友回復：

useEffect也將在初始渲染時運行。這意味著您的兩個效果都將在第一次運行，但第二個也會在stateUserInfo更新時運行。

您可以通過存盤一個布林值來解決此問題，該布林值驗證您是處于初始渲染還是后續渲染。通過這種方式，您可以將兩種效果組合成一個效果。

此外，對于您的代碼中的注釋問題：是的，無論服務器回傳如何，它都會運行。您應該添加該請求try catch以防它引發錯誤，并檢查回應以防意外。


const {token, userInfo} = useContext(LoginContext)
const [stateUserInfo, setStateUserInfo] = userInfo
const [stateToken, setStateToken] = token

// store a boolean to determine if you're on initial render
const afterUpdate = useRef(false)

async function getUserDetails() {      
    const data = await axios.get(apiValidate '&JWT=' stateToken)
    setStateUserInfo(data.data.data) // this line WILL run regardless of the answer of the previous line, so you should validate the response first before assigning it.
}

useEffect(() => {
     if (afterUpdate.current) {
         console.log(stateUserInfo)
     } else {
        afterUpdate.current = true
        getUserDetails()
     }
},[stateUserInfo])

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/498335.html

標籤：反应异步异步等待

上一篇：從異步請求回傳Promise的最佳方式？

下一篇：`setImmediate()`和`setTimeout()`的時間如何受程序性能的約束？