reactjs - React、Firebase、React Dropzone - 上传多个文件时的进度问题

Question

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

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

我正在尝试绘制所有子快照的进度，但没有成功。

上传进度

原始代码是：

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>

感谢您的时间。

标签： reactjsfirebase-storagereact-dropzone