[英]How add item in nested array of object in redux reducer
這是我的示例初始狀態:
let initialState = {
data: {
name: 'john',
books: [
{
name: 'a',
price: 220
}
]
}
}
如何將新書項添加到書中?
我已經試過了
return {
...state,
data :{
...state.data,
books:{
...state.data.books,
name : state.data.books.concat(action.payload.item.name),
price : state.data.books.concat(action.payload.item.price)
}
}
};
有什么想法嗎?
重要提示:我不想刪除書中已有的項目,我想添加帶有動作有效載荷的新項目
您錯過了一些花括號,尤其是books
是數組,並且您要插入新對象
return {
...state,
data: {
...state.data,
books: [
...state.data.books,
{
name: action.payload.item.name,
price: action.payload.item.price
}
]
}
};
首先, books
是數組。 其次,如果您只想向數組添加新項,則可以使用數組傳播運算符。
books: state.data.books.concat(action.payload.item)
也可以使用。
return {
...state,
data: {
...state.data,
books: [
...state.data.books,
action.payload.item
]
}
};
讓我們發明便利工具,使工作更輕松-
const update = (key, { [key]: value, ...state }, f) => ({ ...state, [key]: f (value) }) const initState = { data: { name: "john" , books: [ { name: "a", price: 20 } ] } } const payload = { item: { name: "b", price: 30 } } const nextState = update ('data', initState, x => update ('books', x, arr => [ ...arr, payload.item ] ) ) console.log(initState) console.log(nextState)
產量
// initState
{ data:
{ name: "john"
, books:
[ { name: "a", price: 20 } ]
}
}
// nextState
{ data:
{ name: "john"
, books:
[ { name: "a", price: 20 }
, { name: "b", price: 30 }
]
}
}
答案很容易看這個
const book = {
name : action.payload.item.name,
price : action.payload.item.price
};
return {
...state,
data :{
...state.data,
books: state.data.books.concat(book)
}
};
您可以在這里找到一成不變的更新模式
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.