React:在响应从我调用的函数到达之前是否触发useEffect() ?

Question

是否在data的响应到达之前触发useEffect，因此我在不久之后获得适当的数据之前立即获得undefined的原因?

我的逻辑是

1. LoginScreen, settoken(jwt)
2. 定义isLoggedIn状态，然后有条件地渲染HomeScreen
3. 在HomeScreen上使用提供的JWT
调用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])

这个工作，但我认为它是丑陋的?

在更深层次的问题上，我觉得我在尝试"同步"。逻辑与异步数据!有没有更优雅的方法?也许我的逻辑有问题?

Answer 1

useEffect也将在初始渲染时运行。这意味着你的两个效果将在第一次运行，但第二次将在stateUserInfo更新时运行。

你可以通过存储一个布尔值来验证你是在初始渲染还是在后续渲染来修复这个问题。这样你就可以把两种效果合并成一个效果。

同样，对于代码中的注释问题:YES，无论服务器返回什么，它都将运行。您应该将该请求添加到trycatch中，以防它抛出错误，并在意外情况下检查响应。

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])