[英]How add item in nested array of object in redux reducer
Here is my example initial state: 这是我的示例初始状态:
let initialState = {
data: {
name: 'john',
books: [
{
name: 'a',
price: 220
}
]
}
}
How I can add new book item to books ? 如何将新书项添加到书中?
I tried already 我已经试过了
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)
}
}
};
Any idea for that? 有什么想法吗?
Important: I don't want to delete item which already in books I want to add new one with action payload 重要提示:我不想删除书中已有的项目,我想添加带有动作有效载荷的新项目
You missed some braces there, especially, books
is array and you are inserting new object 您错过了一些花括号,尤其是
books
是数组,并且您要插入新对象
return {
...state,
data: {
...state.data,
books: [
...state.data.books,
{
name: action.payload.item.name,
price: action.payload.item.price
}
]
}
};
First of all, books
is array. 首先,
books
是数组。 Second, if you want just to add a new item to the array, you can use array spread operator. 其次,如果您只想向数组添加新项,则可以使用数组传播运算符。
books: state.data.books.concat(action.payload.item)
would also work. books: state.data.books.concat(action.payload.item)
也可以使用。
return {
...state,
data: {
...state.data,
books: [
...state.data.books,
action.payload.item
]
}
};
Let's make our jobs easier by inventing tools of convenience - 让我们发明便利工具,使工作更轻松-
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)
Output 产量
// initState
{ data:
{ name: "john"
, books:
[ { name: "a", price: 20 } ]
}
}
// nextState
{ data:
{ name: "john"
, books:
[ { name: "a", price: 20 }
, { name: "b", price: 30 }
]
}
}
The answer is easy look at this 答案很容易看这个
const book = {
name : action.payload.item.name,
price : action.payload.item.price
};
return {
...state,
data :{
...state.data,
books: state.data.books.concat(book)
}
};
you can find immutable update patterns here 您可以在这里找到一成不变的更新模式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.