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

Question

如果我有一个 object todo作为 state 的一部分，并且 object 包含数组lists ，在lists内部有对象，在这些对象内部还有另一个数组listItems 。 如何更新数组listItems中的 object 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 )
      }))
   }
}))

演示

Answer 2

我建议您阅读以下文章： https://reactjs.org/docs/update.html

import update from 'react-addons-update';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});