javascript - 更新嵌套数组和对象中的对象。对象-->数组-->对象-->数组--> "object"

Question

如果我有一个对象todo作为您状态的一部分，并且该对象包含数组列表，则列表内部有对象，在这些对象内部还有另一个数组listItems。如何更新数组 listItems 中 id 为“poi098”的对象？

此处演示: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>
    );
  }
}

Answer 1

您可以将嵌套数组更新为，

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