javascript - 映射对象、使用状态以及通过 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，然后为每个 map 迭代分配值，但是我如何通过函数传递数据，并分别设置状态？

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