为react渲染处理promise

Question

我有下面的代码：

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完成？

Answer 1

您需要在组件顶部声明您的状态变量，并像这样设置它们：

determineCounters()
.then(response => {
setActivityCounter(response[0])
setAwardCounter(response[1])
});

当你申报它们时，你会给它们一个初始状态：

const [activityCounter, setActivityCounter] = React.useState(null); // or whatever you need as initial state

Answer 2

在useEffect中包裹then

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);
});
}, []);