Trung tâm cá nhân
sách gpt4 ai đã đi

Cập nhật các đối tượng trong mảng và đối tượng lồng nhau. đối tượng-->mảng-->đối tượng-->mảng--> "đối tượng"

In lại 作者：行者123 更新时间：2023-12-01 00:37:23 28 4
mua khóa gpt4 Nike

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

此处演示:https://stackblitz.com/edit/react-fjyb9g 

class App extends Component {
  constructor() {
    siêu();
    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)
    trở lại (
      

        
        

          
        

      

    );
  }
}

1 Câu trả lời

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

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 - 更新嵌套数组和对象中的对象。对象-->数组-->对象-->数组--> "object"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58001150/

28 4 0
Bài viết được đề xuất: python - 无法同时从两个不同深度刮取不同字段
Bài viết được đề xuất: javascript - 如何从JS字符串中删除双引号？
Bài viết được đề xuất: javascript - 在对象数组中搜索字符串并返回数组
Bài viết được đề xuất: javascript - 为什么当我检查循环中的字符串是否包含在字符串数组中时，所有字符串都为 false？
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com