我的目標是映射一個陣列并替換匹配條件的物件。很像這個作業示例:
const rows = [{
"name": "Dad",
"car": "Sedan"
}, {
"name": "Mom",
"car": "Sedan"
}]
const newCar = {
"name": "Dad",
"car": "Minivan"
}
const newArray = rows.map((r) => (r.name === newCar.name ? newCar : r))
console.log(newArray)
在我的用例中,組件狀態包含從 API 填充的陣列。
const [rows, setRows] = useState([])
稍后,需要對陣列中的一個物件進行更改。該data變數包含要合并到陣列中的修改物件。我在陣列上進行映射以尋找_id場上的匹配項。當_id匹配時,我回傳物件data(要合并到陣列中的值)。當沒有匹配項時,我將回傳物件,因為它最初存在于狀態中。
setRows((rows) => [
...rows,
rows.map((r) => (r._id === data._id ? data : r)),
])
所述期望的結果是相同的尺寸與原始的陣列。除了所有原始陣列值之外,這個新陣列還應包含一個修改后的物件。
上面代碼的實際結果data是添加了修改的物件而不是更新。
如何更改我的代碼以替換修改后的陣列元素?
uj5u.com熱心網友回復:
該useState() 功能更新的形式呼叫一個函式,并將其以前的狀態。該Array.map()函式回傳一個帶有更新值的新陣列。這意味著您只需要映射之前的狀態即可獲得新狀態:
setRows(rows => rows.map((r) => (r._id === data._id ? data : r)))
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/386192.html
