映射對象，使用狀態以及通過setState中的函數傳遞值

Question

我有一個React應用程序，在這里我想將狀態設置為等於通過函數傳遞的對象數組。

我有兩個變量，是文件擴展名，一個是原始數據base64編碼。

                       this.setState({
                              result: fileItems.map(fileItem => ({
                                "file": this.findFileTypeHandler(fileItem.file.name), 
                                "data": this.getBase64(fileItem.file)
                              }))
                            });
                      }}>

截至目前，我只是返回兩個函數中的值，但是當函數不是異步時，就會出現問題。

findFileTypeHandler = file =>{
    return file.split('.').pop();
}

getBase64 = file => {
    //find en måde at gøre den asynkron
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result) 
      this.setState({base64: reader.result})
     return reader.result;
    };
    reader.onerror = function (error) {
      console.log('error is ', error)
    };
  }

最好的情況是將setState，然后為每個映射迭代分配值，但是我如何才能通過函數傳遞數據並分別設置狀態？

Answer 1

如何使用Promise.all等待所有文件被讀取，然后對結果進行setState 。

Promise.all(
    fileItems.map(fileItem => new Promise((resolve, reject) => {

        //find en måde at gøre den asynkron
        var reader = new FileReader();
        reader.readAsDataURL(fileItem.file);

        reader.onload = () => {
            resolve({
                file: this.findFileTypeHandler(fileItem.file.name),
                data: {
                    base64: reader.result
                }
            });
        };

        reader.onerror = (error) => reject(error);

    }))
)
.then((results) => {

    this.setState({
        result: results
    });

})
.catch((error) => console.log(error));