Javascript 映射对象，使用状态，并通过setState中的函数传递值

我有一个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)
    };
  }

---

最好的情况是设置状态，然后为每个映射迭代分配值，但是我如何通过函数传递数据，并分别设置状态？

使用

Promise如何。所有
等待读取所有文件，然后
设置状态
结果

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));

如何使用
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));

你关心你所在州的结果顺序吗？它必须遵守fileItems顺序吗？不，顺序无关紧要，我只需要将数组发送到我的后端服务器解决方案可以是在getBase64方法中附加到您的状态，因为它是唯一一个异步的方法。onload回调将通过构造数据键和文件键将结果附加到您的状态。您关心结果在您的状态中的顺序吗？它必须遵守fileItems顺序吗？不，顺序无关紧要，我只需要将数组发送到我的后端服务器解决方案可以是在getBase64方法中附加到您的状态，因为它是唯一一个异步的方法。onload回调将通过构造数据键和文件键将结果附加到状态。