繁体   English   中英

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

Updating an object in nested arrays and objects. object --> array -->object--> array--> “object”

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

如果我有一个todo作为状态的一部分,并且该对象包含数组lists ,则lists有对象,在这些对象内还有另一个数组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>
    );
  }
}
2 个回复

您可以将嵌套数组更新为

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 )
      }))
   }
}))

演示版

我建议您阅读以下文章: 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]}}
});
2 更新状态 -> 对象 -> 数组 -> 对象

迷失在深度嵌套的 setState 函数中。 我想要做的是将一个对象添加到我的组件状态内的对象内的数组中。 我已经成功地这样做了,但我正在尝试这样做,如果该对象已经存在,则该函数将更新数量。 我不确定我做错了什么。 状态 添加到购物车() 编辑 *********** 新代码更有条理, ...

3 setState 包含对象=> 数组=> 对象

我所拥有的是 我将如何更改IMAGES对象内的值。 我想更改 id 和 Urls。 我尝试了以下方法但没有成功。 但是当我尝试执行它时,它说productData.images.id不可迭代。 有什么可以帮忙的吗... ...

4 对象不是> = 2列数组

我正在学习在R中使用krige,并且卡在此错误“对象不是&gt; = 2列数组”中。 我通过如下分配坐标将初始数据框转换为空间数据框: 我使用以下命令创建了一个网格( PB.grid ): 这是我的代码 这是数据文件的链接: https : //www.over ...

5 访问数组->对象->数组值

我正在尝试访问d3中数组数据的对象wns的“值”数组的元素,我该怎么办? 我需要访问这些值以创建钢筋。 说我需要从数据-&gt; wns [0]-&gt; values [0]访问值“ -0.06”,并从数据-&gt; wns [1]-&gt; values [0]访问值“ -0.04 ...

2015-06-08 21:27:55 0 125   d3.js
6 PHP stdClass对象数组[_] =>语法

我正在尝试访问以下对象的第一部分。 我无法弄清楚[_] =&gt;语法是什么? 如果我尝试使用Body-&gt;[_]打印对象的1st过去,则会出错。 ...

2011-07-18 05:10:58 1 209   php
7 从对象->数组->对象->对象mongo中拉取值

我有以下结构 在这里,我想检查属性d在b内部是否存在,它可能存在于b内部的多个对象中,如果存在则从记录中拉出d对象。 注意 :属性d可能存在于b1和b2内多次,在这种情况下,我想将其从所有对象中删除 我试过像 但尽管有记录,但它没有返回任何信息,感谢您的帮助。 ...

2015-10-24 18:38:36 1 125   mongodb
8 PHP访问对象->充满对象的数组

再一次我有一个小问题。 这只是一件小事,但我不明白。 结构如下:$ theImage是一个对象。 它具有作为对象数组的数据。 我尝试从数据中填充$ test机智...但这是行不通的。 编辑:好吧,我忘了说我从一个学说的SQL查询中获取了对象。 最好的祝福, ...

9 使用Vue JS Typescript迭代对象->数组->对象

所以我有一个包含对象数组的对象。 我需要获取数组每个对象中的数据以显示开放时间。 我已经成功检索了代码段内for循环中的每个键值。 但是我不确定如何在我的.vue视图页面中显示它。 我是否使用字符串插值? 我是否应该在.vue页面内使用v-for指令来显示数据? 对Vue ...

10 在对象>对象>数组上的knockout.js foreach绑定

我在可观察到的称为“设备”(取自ko.toJSON)中的对象上具有以下剔除结构: 如何在HTML中绑定foreach,以便可以遍历白名单? 我尝试了以下引发绑定错误的操作: 我也尝试这样做不会引发错误,但也不会循环: 谢谢 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM