setState在Array.map函数中仅执行一次

Question

I've got an Array.map function for looping through new uploaded files.

Because a user can upload files several times, the files must be added together in one array.

Therefore I'm using the following code

onFileSelect = e => {
    //FileList to array
    const files = [...e.target.files];

    files.map(file => {
        this.setState({ invoices: [...this.state.invoices, file]})
    });
}

The problem is that setState is only be executed on the last item. So if a nuser selects 5 files, only the last one is getting into the state.

A possible solution is to take the exesting array, push the new files and do one setState outside of the map function but I would like to know why or how I can get multiple setStates into one map function.

This is working

onFileSelect = e => {
    //FileList to array
    const files = [...e.target.files];

    const invoiceArr = this.state.invoices;

    files.map(file => {
        invoiceArr.push(file)
    });

    this.setState({invoices: invoiceArr});
}

Answer 1

Thats because React batches states, that means setState does not actually set the state but it adds the state transition onto a queue, that will then get executed somewhen. So in your case the queue will look like this (pseudocode):

original -> original + files[0]
original -> original + files[1]
original -> original + files[2]
// flattened to:
original -> original + files[2]

As you can see, the states don't depend on each other. Therefore react will only take the last state, and you will only see the last file. Instead you could make one state dependend on the previous one:

files.forEach(file => {
    this.setState(previous => ({
        invoices: [...previous.invoices, file]
    }));
});

This causes the queue to look like:

original -> original + files[0]
previous -> previous + files[1]
previous -> previous + files[2]
// flattened to
original -> original + files[0] + files[1] + files[2]

However actually you could add all files in one step:

this.setState(previous => ({ invoices: previous.invoices.concat(files) }));

TLDR: Don't set the state if it depends on a previous state. this.state inside of setState is forbidden and will only work "by accident".

Answer 2

The problem with the first loop is that you are overriding the existing item with each iteration, and because setState is async it's not safe to do that way

why not do this instead?

onFileSelect = e => {
  //FileList to array
  const files = [...e.target.files];
  this.setState({ invoices: []})

  files.each(file => this.state.invoices.push(file)});
}

Answer 3

The 2nd option seems to be the right one.
The map function should be used if you want to return a new array.
You can also use reduce :

onFileSelect = e => {

  const files = [...e.target.files];
  const invoiceArr = this.state.invoices;

  let invoicesUpdated = files.reduce((acc, file) => {
    acc.push(file);
    return acc;
  }, invoiceArr);

  this.setState({invoices: invoicesUpdated});
}