Updating state while in a JSZIP file - reactjs

Question

I'm using the library JSZip to read a user-uploaded zip file and I want to load the contents of each file into the state.
Here's a toned-down version of reading the zip file:
const [files, setFiles] = useState([]);
const onUploadClick = () => {
const load = (filename) => {
return new Promise(
(resolve) => {
jzip.file(filename).async(`arraybuffer`).then(
(content) => {
return resolve(Array.from(new Uint8Array(content)));
}
)
}
)
}
jzip.loadAsync(file).then(
(zip) => {
zip.forEach(
async (_, entry) => {
const filename = entry[`name`];
const buffer = await load(filename);
const newFiles = [...files];
newFiles.push(buffer);
setFiles([...newFiles]);
)
}
)
}
I then used useEffect to monitor the changes to the files state component:
useEffect(
() => {
console.log(files)
},
[files]
);
But what I get out is just the following when trying to load a zip file with 3 files inside:
Instead, I am expecting something like
[Array(33), Array(33), Array(33)]
So it's reading each file correctly, converting to a Uint8Array, and adding it to the state, but the state is not retaining the previous files.
I also tried pushing just the filename into the files state component, and same error.
I am unsure why this is happening. Any advice is appreciated. Thank you!

Answer 1

Fixed code below:
const [files, setFiles] = useState([]);
const onUploadClick = () => {
const load = (filename) => {
return new Promise(
(resolve) => {
jzip.file(filename).async(`arraybuffer`).then(
(content) => {
return resolve(Array.from(new Uint8Array(content)));
}
)
}
)
}
jzip.loadAsync(file).then(
(zip) => {
const newFiles = [];
zip.forEach(
async (_, entry) => {
const filename = entry[`name`];
const buffer = await load(filename);
newFiles.push(buffer);
}
)
setFiles(newFiles);
)
}
The state update setFiles was not finished yet before trying to add a new entry, therefore files was not updated yet when trying to add a 2nd one. Same for the third file: it pulled the current files array (which was still empty, because the state update before it had not finished) and pushed something new. That's why there was only ever one item in the list.