如何在從 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}]);