无法更新react组件的状态(具有键和值的对象的集合)

Question

我正在AWS S3上上传多个视频。

const [files, setFiles] = useState(
[
{
fileData: File,
canceled: false,
progress: 0,
fileName: "fileName1.mp4",
},
{
fileData: File,
canceled: false,
progress: 0,
fileName: "fileName2.mp4",
},
]
)

在S3上传中，我们可以在回调的触发下跟踪上传的进度。因此，每当有进度更新时，我都想更新我的状态(文件(。

我正在使用一个函数来更新状态。

const updateProgress = (fileName, progress) => {
//fileName - the file whose progress property we need to update,
// progress- the progress in number

}

更新进度被调用得非常快(当视频数量更多时，更新进度会更快(，当我更新一个文件的进度时，其他文件的进度会被分配为零。

我也试过redux，但结果是一样的。

Answer 1

仅使用以下内容更新特定文件的进度。

const updateProgress = (fileName, progress) => {
//fileName - the file whose progress property we need to update,
// progress- the progress in number
let newArr = [...files]; // copying the old datas array
const fileIndex = newArr.findIndex(file => file.fileName === fileName);
newArr[fileIndex].progress = progress;
setFiles(newArr);
}