無法更新反應組件的 state（具有鍵和值的對象的集合）

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 上傳中，我們可以在觸發回調時跟蹤上傳進度。 因此，每當有進度更新時，我想更新我的 state（文件）。

我正在使用 function 來更新 state。

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