如何在收到 Api 的响应后将多个对象添加到空数组中？

Question

我正在上传 4 张图片作为响应，我正在一个接一个地获取 4 个网址，将 4 个网址保存在 4 个不同的对象中

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

每次循环你都在覆盖你之前所做的工作。如果开始时 multiStatement 是一个空数组，那么您首先将状态设置为空数组 + 对象 url 0，然后是空数组 + 对象 url 1，依此类推。最后，唯一坚持的是最后一个 url.

的空数组+对象

要解决此问题，请使用 setMultiStatement 的函数版本，这样您就始终使用最新状态：

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

如何在收到 Api 的响应后将多个对象添加到空数组中？

How to add multiple Objects to an empty array react after getting response from Api react

javascript

reactjs