我有一個存盤在名為itemsToUpload. 有一個按鈕可以將物件串列上傳到資料庫。以下是串列中的一個物件。
{
type:"Fiat",
model:"500",
color:"white",
imgUrl="https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-‘Hey-Google-car.jpg"
};
將資料發送到資料庫時，我想讓它imgUrl為空。
以下代碼是我如何將 設定imgUrl為 null。
const submitHandler =async()=>{
setitemsToUpload((items)=>
items.map((item)=>({
...item,
imgUrl:null
})))
const response =await axios.post("api url",itemsToUpload)
console.log(response )
}
設定imgUrl為空后，itemsToUpload狀態發生變化，但發送到 API 的資料狀態imgUrl不為空
這里有什么問題？
uj5u.com熱心網友回復：
Array.map不修改陣列，它使用回傳值創建一個新陣列，因此您需要將地圖的結果分配給陣列
const items = [
{
type:"Fiat",
model:"500",
color:"white",
imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-‘Hey-Google-car.jpg"
}
]
const modifiedItems = items.map((item)=>({
...item,
imgUrl:null
}))
console.log(items)
console.log(modifiedItems)uj5u.com熱心網友回復：
代碼在這里作業。所以我不確定問題是否屬于這部分。
const array = [{
type:"Fiat",
model:"500",
color:"white",
imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-‘Hey-Google-car.jpg"
},
{
type:"Fiat",
model:"500",
color:"white",
imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-‘Hey-Google-car.jpg"
},
{
type:"Fiat",
model:"500",
color:"white",
imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-‘Hey-Google-car.jpg"
}];
console.log(array);
const clearIt = array => {
return array.map(item => {
item.imgUrl = null
return item;
});
};
const newArray = clearIt(array);
console.log(newArray);uj5u.com熱心網友回復：
在你的代碼setitemsToUpload中不會立即改變itemsToUpload而是告訴 React 安排狀態更新和重新渲染，同時submitHandler繼續運行并axios.post在itemsToUpload更新之前呼叫。
嘗試像這樣重構它：
const submitHandler = async () => {
const newItemsToUpload = items.map((item) => ({
...item,
imgUrl: null
}))
setitemsToUpload((items) => newItemsToUpload)
const response = await axios.post("api url", newItemsToUpload)
console.log(response)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391787.html
標籤：javascript 数组 反应 反应钩子 公理
上一篇：如何洗掉物件和所有參考？