Невозможно обновить состояние (коллекция объектов с ключами и значениями) реагирующего компонента

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
    
}

Процесс обновления вызывается очень быстро (даже быстрее, когда количество видео больше), а когда я обновляю процесс файла, прогресс других файлов получить ноль.

Я также пробовал использовать приставку, но результаты те же.

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