更新嵌套数组和对象中的对象。对象 --> 数组 --> 对象 --> 数组 --> “对象”

Question

如果我有一个对象todo作为您状态的一部分，并且该对象包含 array lists，则在其中lists有对象，在这些对象中还有另一个 array listItems。如何listItems使用 id:" poi098 "更新数组内的对象？演示在这里：https : //stackblitz.com/edit/react-fjyb9gclass 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>    );  }}