React:异步调用等待另一个异步调用?

Question

在继续设置stateToken(触发有条件地呈现到我的主屏幕)之前，我如何形成这个函数来'等待'stateUserInfo首先被确定填充?

async function submitLogin() {         
try {
const data = await axios.post(apiAuth, {username: email, password: password, auth: auth})
const jwt = data.data.data.jwt
console.log(jwt)
getUserDetails(jwt)            
}
catch (err) {
console.log(err)
}
} 
async function getUserDetails(jwt) {      
const data = await axios.get(apiValidate+'&JWT='+jwt)
setTimeout(function() {
setStateUserInfo(data.data)
}, 4000);
//go to HomeScreen BUT FIRST WAIT FOR stateUserInfo!!!
setStateToken(jwt) 
}

Answer 1

处理这个问题的一种方法是使用useEffect，这是一个内置的React钩子，当它的一个依赖项发生变化时，它会激活一个回调。

例子:

useEffect(() => {
setStateUserInfo(data.data);
// Whatever else we want to do after the state has been updated.
}, [stateToken])

这将"观看";stateToken的值，并在每次更改时运行回调。
因此，只要stateToken得到更新，stateUserInfo也会得到更新。

查看文档获取更多信息。