Javascript 如何将多个文件上载到firebase-React JS

我正在开发React JS应用程序，尝试将文件上传到Firebase。我可以很容易地上传文件，甚至一个文件，但问题是当我试图显示个别文件上传文件的进度。我已经建立了一个用户界面，当用户选择文件时，文件将被渲染，并显示文件大小、名称和类型等。当我单击上载按钮时，上载将在后台开始。我想做的是，如何在视图上显示多个文件的进度

州政府

this.state={
selectedFilesPrev:[]，
可预览文件：false，
多重：对，
showloader:错误
}

JSX DOM

render（）{
如果（！this.state.filesPreviewAble）{
返回(
拖放文件

或
上传文件
)
}else if（this.state.filesPreviewAble）{
设l=''；
if（this.state.showLoaders）{
l=
}else{l='''}
返回(
要上载的文件
{
this.state.selectedFilesPrev.map（（e，i）=>{
返回(
{e.meta.name}
{this.formatFileSize（e.meta.size）}-{e.meta.type}
× 
{l}
)
})
}
现在上传
)
}
}

文件选择器代码

按钮加载（事件）{
让object=event.target.files；
让文件=[]
for（对象中的常量键）{
if（object.hasOwnProperty（key））{
常量元素=对象[键]；
文件。推送（元素）
}
}
设i=0；
file.map（f=>{
此.generatePreviewData（f，（prev）=>{
i++；
this.state.selectedFilesPrev.push({
梅塔：f，
img:prev，
进展：{
百分比：0，
已加载：错误
}
})
if（i==files.length）{
这是我的国家({
可预览文件：true
})
}
})
返回0；
})
}

上传功能（工作完美）

handleUploadingFiles（）{
console.log（this.state.selectedFilesPrev）
this.setState（{showLoaders:true}）
this.state.selectedFilesPrev.map（（文件，idx）=>{
让task=stdb.ref（`Images/${file.meta.name}`）.put（file.meta）；
task.on（'state_changed'，snapshot=>{
var progress=（snapshot.bytesttransfered/snapshot.totalBytes）*100；
this.state.selectedFilesPrev[idx].progress.percent=进度；
log（“文件#“+idx，'上载为'+progress+'%done'）；
},
错误=>{
console.log（错误）
},
() => {
stdb.ref（'Images'）.child（file.meta.name）.getDownloadURL（）。然后（url=>{
console.log（url）
})
}) 
})
}

注意：我想要的只是，当用户点击上传按钮时，每个文件上传进度都应该显示在UI上。

handleUploadingFiles（）

具有进度，它输出每个任务的进度，但我无法在组件上显示该进度