如果我有一个对象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/

10-12 01:09
查看更多