如何在从 Api react 获得响应后将多个对象添加到空数组中 react

Question

I am uploding 4 images in response i am getting 4 urls one by one save 4 urls in 4 diffrent objects

const [multiStatement, setMultiStatement] = useState([])

const multipStatement = async(e) => {
  const files = e.target.files 
  for (let i = 0; i < files.length; i++) {          
    const url = await uploadStaement(files[i])
    console.log(url)
    setMultiStatement([...multiStatement, {type:"document", frontBack:"front", url:url}])
  }
}
<input type="file" id="file" multiple name="file" onChange={multipStatement} />

Answer 1

Every time through the loop you are overwriting the work you did before. If multiStatement was an empty array when this started, then you first set the state to empty array + object with url 0, then empty array + object with url 1, and so on. At the end, the only one that sticks is empty array + object with the last url.

To fix this, use the function version of setMultiStatement, so you are always working with the latest state:

setMultiStatement(prev => [...prev, {type:"document", frontBack:"front", url:url}]);