[英]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.