Array in React State is overwritten when handling mulitple files - reactjs

Question

I have a system where, once the user selects an Excel file, the file is read into state MultipleFileTableData.ExcelData and is then shown using AntD table.
When the user selects a file, the file is uploaded to an API which returns the original filename and the filename as stored in the system.
Once the file is uploaded, the data is then updated to indicate that the file has uploaded and the filename as stored in the system is added.
The above works perfectly fine if a single file is selected, however the system needs to allow multiple files. As soon as you select more than one file to upload, the state is overwritten. In short, the first file row is updated with the flag for file uploaded and the stored filename. But then once the second file is processed, the first file reverts.
I've omitted most of the code as I beleive it is not relevant. Code below:
const CertificateUploadMultiple = ({FormState, SetFormState}) => {
const { Dragger } = Upload;
const [MultipleFileTableData, SetMultipleFileTableData] = useState({ExcelData: []});// userRef([]); // This holds the data from the imported excel file
const BatchUploadTableColumns = [
{title: 'Customer', dataIndex: 'Customer Name', key: 'Customer Name'},
{title: 'Serial Number', dataIndex: 'Serial Number', key: 'Serial Number'},
{title: 'Certificate Number', dataIndex: 'Certificate Number', key: 'Certificate Number'},
{title: 'Certificate Date', dataIndex: 'Certificate Date', key: 'Certificate Date'},
{title: 'Certificate File', dataIndex: 'Certificate Filename', key: 'Certificate Filename'},
{title: 'Certificate Uploaded', align: 'right', render: (text, record, index) => {
return (<>
{record['FileUploaded'] == 'Y' ? <span>File uploaded</span> : <span>Awaiting File</span>}
<Button danger size='small' style={{marginLeft: "0.5em"}} onClick={() => {DeleteExcelRowData(text, record, index);}}><DeleteOutlined /></Button>
</>)
}
},
]
const ReadTemplateFile = async (e) => {
console.log("ReadTemplateFile", e);
const AllowedFiles = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
if (!AllowedFiles.includes(e.type)) {
let Content = <><p>'{file.name}' is not a permitted file</p><p>Received File type: '{file.type}'</p></>;
Modal.error({
title: 'Invalid File',
content: Content
})
return false;
}
const reader = new FileReader();
reader.onload = (evt) => {
const bstr = evt.target.result;
const wb = XLSX.read(bstr, { type: "binary" });
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const RawData = XLSX.utils.sheet_to_json(ws);
console.log("Excel Raw Data", RawData);
const Rows = RawData.map((row, idx) => ({...row, key:idx, FileUploaded: 'N', UploadedFileName: ''}));
SetMultipleFileState(prevState => ({...prevState, ShowTemplateUpload: false}));
SetMultipleFileTableData(prevState => ({...prevState, ExcelData: Rows}));
};
reader.readAsBinaryString(e);
return false;
}
const RowColour = (record) => {
//if (UploadedFileList.includes(record['Certificate Filename'])){
//if (UploadedFileListRef.current.includes(record['Certificate Filename'])){
/*if (record.FileUploaded == 'Y'){
return 'fileuploaded';
}*/
return record.FileUploaded === 'Y' ? 'fileuploaded' : 'awaitingfile';
//return 'awaitingfile';
}
const MultipleCertificateFileUploadProcessFile = async (options) => {
const { onSuccess, onError, file, onProgress } = options;
const UploadProgressHandler = (event) => {
const percent = Math.floor((event.loaded / event.total) * 100);
setProgress(percent);
if (percent === 100) {
setTimeout(() => setProgress(0), 1000);
}
onProgress({ percent: (event.loaded / event.total) * 100 });
}
const Data = new FormData();
Data.append("CertificateFile", file);
try {
CertificateService.UploadCertificateFile(Data, UploadProgressHandler)
.then((resp) => {
if (resp.data.code == '200'){
// mark the line as completed
/*let idx = MultipleFileTableData.ExcelData.findIndex((obj => obj["Certificate Filename"] === resp.data.UploadedOriginalFileName));
console.log("idx", idx);
let t = MultipleFileTableData.ExcelData[idx];
t.FileUploaded = 'Y';
t.UploadedFileName = resp.data.UploadedFileName;*/
//SetMultipleFileTableData(prevState => ({...prevState, ExcelData: [...prevState.ExcelData, t]}));
let t = MultipleFileTableData.ExcelData.map(p => p["Certificate Filename"] === resp.data.UploadedOriginalFileName ?
{...p, FileUploaded: 'Y', UploadedFileName: resp.data.UploadedFileName}
: p
);
SetMultipleFileTableData(prevState => ({...prevState, ExcelData: t}));
onSuccess("Ok");
} else {
message.error(<div>Unable to process file '{resp.data.CertificateFileName}': {resp.data.msg}</div>)
console.log("Error - ", resp.data);
onError(resp.data);
}
console.log("resp", resp);
});
} catch (err) {
console.log( err);
onError(err);
}
}
Here is the visual part
<Row>
<Col span={20}>
<Table
// dataSource={MultipleFileState.ExcelFileData}
dataSource={MultipleFileTableData.ExcelData}
columns={BatchUploadTableColumns}
rowClassName={RowColour}
pagination={false}
/>
</Col>
<Col span={4}>
<Dragger
name='BatchCertificateFile'
multiple={true}
beforeUpload={MultipleCertificateFileBeforeUpload}
style={{marginLeft: "1em"}}
onChange={MultipleCertificateFileUploadOnChange}
customRequest={MultipleCertificateFileUploadProcessFile}
showUploadList={true}
fileList={MultipleFileState.MultipleCertificateFileList}
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag certificate files to this area to start processing</p>
</Dragger>
</Col>
</Row>

Answer 1

OK so, to prevent this I needed to stop mutating the state with the current state value. This is what was causing the value to be overwritten. Turns out that I should have moved the MultipleFileTableData.ExcelData.map to within the SetMultipleFileTableData and instead use the prevState variable.
SetMultipleFileTableData(prevState => ({...prevState, ExcelData:
(
prevState.ExcelData.map(p => p["Certificate Filename"] === resp.data.UploadedOriginalFileName ?
{...p, FileUploaded: 'Y', UploadedFileName: resp.data.UploadedFileName}
: p
)
)
}));