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

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}]);