在循環中的所有異步調用完成后如何調用 function？

Question

reader.onloadend 調用異步 function addData 並且 reader.onloadend 處於循環中。

const uploadFiles = () => {
    console.log(acceptedFiles)
    setLoading(true)
    console.log(loading)
    let i = 0
    let l = acceptedFiles.length

    for (i = 0; i < l; i++) {
      let file = acceptedFiles[i]
      const reader = new window.FileReader()
      reader.readAsArrayBuffer(file)
      reader.onloadend = () => {
        let buffer = Buffer(reader.result)
        console.log(buffer)
        addData(file.path, buffer)
      }
    }
  }

這是我的異步 function addData

async function addData(name, buffer) {
    const file = await myfunction()
    
  }

在調用循環中的所有異步 addData 之后，我想調用 setLoading(false) 。 onClick function 不起作用，當我在所有異步 function 完成之前單擊按鈕時，加載設置為 false。

const [loading, setLoading] = useState(false)
<button onClick={() => {
                uploadFiles()
                 setLoading(false) 
             }}
            disabled={loading}
          >

Answer 1

使用 Promise，您可以知道何時讀取了所有文件。 基本思路如下

 const uploadFiles = (evt) => { // set loading to true; const acceptedFiles = [...evt.target.files]; // Create a map of promises that will resolve when file is read const readerPromises = acceptedFiles.map(file => { return new Promise(resolve => { const reader = new window.FileReader() reader.readAsArrayBuffer(file) reader.onloadend = () => { console.log(file); let buffer = reader; // Buffer(reader.result) resolve([file.name, buffer]) } }); }); // Detects when all of the promises are fully loaded Promise.all(readerPromises).then(results => { console.log(results); // set loading to false; }); };

 <input type="file" multiple onchange="uploadFiles(event)" />