如果我有一个对象todo
作为状态的一部分,并且该对象包含array lists
,则lists
内有对象,而在这些对象内还有另一个array listItems
。如何更新ID为“ poi098”的数组listItems
中的对象?
此处演示:https://stackblitz.com/edit/react-fjyb9g
class App extends Component {
constructor() {
super();
this.state = {
todo: {
id: "abc123",
name: "AAA",
lists: [
{
id: "def456",
desc: "description",
listItems: [
{
id: "ghj678",
title: "title1",
listItemsId: "88abf1"
},
{
id: "poi098",
title: "title2",
listItemsId: "2a49f25"
}
]
},
{
id: "zxc456",
desc: "description3",
listItems: [
{
id: "qyu678",
title: "title3",
listItemsId: "h60bf1"
},
{
id: "p8l098",
title: "title4",
listItemsId: "6yuf25"
}
]
}
]
}
}
}
addNew = () => {
const data = {
id: "poi098",
title: "title23333333333",
listItemsId: "2a49f25"
}
const todoCheck = this.state.todo['lists'].filter(obj => obj.id === "zxc456")
const todoCheckList = todoCheck.map((obj, i) => obj['listItems'])[0]
this.setState(prevState => ({
...prevState,
todo: {
...prevState.todo,
lists: {
...prevState.todo.lists,
listItems: {
...prevState.todo.lists.listItems,
listItems: todoCheckList
}
}
}
}))
}
render() {
console.log(this.state.todo)
return (
<div>
<Hello name={this.state.name} />
<p>
<button onClick={this.addNew}>Button</button>
</p>
</div>
);
}
}
最佳答案
您可以将嵌套数组更新为
this.setState(prevState => ({
...prevState,
todo: {
...prevState.todo,
lists: prevState.todo.lists.map( list => ({
...list,
listItems: list.listItems.map( listItem => listItem.id === data.id ? data : listItem )
}))
}
}))
Demo
关于javascript - 更新嵌套数组和对象中的对象。对象->数组->对象->数组->“对象”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58001150/