我有以下代码:
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 完成?
答案 0 :(得分:1)
你需要在你的组件之上声明你的状态变量并像这样设置它们:
determineCounters()
.then(response => {
setActivityCounter(response[0])
setAwardCounter(response[1])
});
当你声明它们时,你会给它们一个初始状态:
const [activityCounter, setActivityCounter] = React.useState(null); // or whatever you need as initial state
答案 1 :(得分:0)
将 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);
});
}, []);