反应显示作业进度

Question

我在循环中发出请求，并希望在div 上显示其进度：

import React, {useState, useEffect} from 'react';
import axios from 'axios';
function Job() {
const [part, setPart] = useState(0);
const [message, setMessage] = useState(null);
async function executeJob() {
const N_PARTS = 10;
for (let i = 0; i < N_PARTS; i++) {
setPart(i);
setMessage(`Current part: ${part}`);
await axios.post(`/parts/${i}/doit`);
}
}
return (
<>
<div>{message}</div>
<button onClick={executeJob}>Execute</button>
</>
);
}

当我运行它时，请求已正确发出，但它无法正确显示message。我怀疑我不能以这种方式按顺序设置状态，必须将其放入效果中。我是使用 React 钩子的新手，请让我知道正确的方法。

Answer 1

我举了一个简单的例子。

export default function App() {
const [ part, setPart] = React.useState(0);
async function execute(){
for await(let i of new Array(10).fill(0)){
setPart((prev)=>prev+1);
console.log(i);
await fetch(`https://randomuser.me/api`).then((data)=>{
console.log(data);
})
}
}
return (
<div className="App">
<h1>Hello CodeSandbox {part}</h1>
<button onClick={execute}>Excute</button>
</div>
);
}

这是codesandbox中的相同示例

https://codesandbox.io/s/adoring-cannon-srppr

您可以将for-loop与 async-await 一起使用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of