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

Question

我正在上传4张图片作为响应，我得到4个url一个接一个保存4个url在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}]);