处理反应渲染的承诺

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 值，这搞砸了 return 中显示的内容。如何延迟计数器和 return 以等待 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

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

处理反应渲染的承诺

handling promise for react render

javascript

promise

reactjs