React，Firebase，React Dropzone-上传多个文件时出现进度问题

问题描述

我已成功使用React-Dropzone将多个文件上传到Firebase。

我面临的问题是每个文件下方的进度条，所有文件的进度都以相同的速率进行。

我正在尝试映射所有子快照的进度，但是没有成功。

Upload Progress

原始代码是：

files.forEach((files) => {
        const storageRef = firebase.storage().ref(`projects/${time}-${files.name}`).put(files);

        storageRef.on('state_changed',(snapshot)=>{
                const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes)*100);
                setProgress(progress);
            },(error)=>{console.log(error)},()=>{
                setProgress(0);
            }
        )
    });

           <div
                className="row"
                id="file-previews"
            >
                {selectedFiles.map((f,i) => {
                    return (
                        <div className="col s12" key={i}>
                            {f.name} - {f.formattedSize}
                            <div className="progress">
                                <div className="determinate" style={{width: progress + '%'}}></div>
                            </div>
                        </div>
                    );
                })}
            </div>

谢谢您的时间。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）