[英]handling promise for react render
我有以下代碼:
async function determineCounters() {
#do something
}
determineCounters()
.then(response => {
let var2 = response[0];
let var3 = response[1];
});
const [activityCounter, setActivityCounter] = React.useState(var2);
const [awardCounter, setAwardCounter] = React.useState(var3);
return(
#uses activityCounter and awardCounter
)
當我運行此代碼時,activityCounter 和 AwardCounter 沒有填充正確的 var2 和 var3 值,這會破壞返回中顯示的內容。 如何延遲計數器和返回以等待 var2 和 var3 完成?
您需要在組件頂部聲明 state 變量,並將它們設置為:
determineCounters()
.then(response => {
setActivityCounter(response[0])
setAwardCounter(response[1])
});
當你聲明它們時,你會給它們一個初始的 state:
const [activityCounter, setActivityCounter] = React.useState(null); // or whatever you need as initial state
將then
包裹在useEffect
const [activityCounter, setActivityCounter] = React.useState(null);
const [awardCounter, setAwardCounter] = React.useState(null);
React.useEffect(() => {
determineCounters().then((response) => {
let var2 = response[0];
let var3 = response[1];
setActivityCounter(var2);
setAwardCounter(var3);
});
}, []);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.