更新嵌套对象的反应状态数组

Question

也许这很愚蠢，但我的状态是一个嵌套对象数组:o 看起来如下：

  const data = [
        {
            randomid1: {
                name: 'lorem',
                latinName: 'ipsem',
            },
        },
        {
            randomid2: {
                name: 'lorem2',
                latinName: 'ipsem2',
            },
        },
    ]

我需要用其中一项的新名称 and/or latinName 更新此数组（假设 randomid1.name .

我一直在努力传播等，但不断出错。现在我正在尝试映射某些东西，但这也行不通。有人吗？

Answer 1

您可以使用 Array#find and Object#hasOwnProperty:

检查数组是否包含某个项目

const 
  data = [
    { randomid1: { name: 'lorem', latinName: 'ipsem' } },
    { randomid2: { name: 'lorem2', latinName: 'ipsem2' } }
  ],
  id = 'randomid2';

const elem = data.find(e => e.hasOwnProperty(id));
if(elem) {
  elem[id].name = 'new name';
}

console.log(data);

Answer 2

我会这样做：

// will iterate on all the top level objects
for (const itemWrapper of data) {
  // will iterate just once
  for (const item of Object.values(itemWrapper)) {
    if (item.name = 'whatever') {
      // update item
    }
  }
}

您可以移动此功能并 return 找到该项目以获得更好的性能。

PS : 数据结构似乎有点难用，如果你能把它改成你正在搜索的索引的东西，那就太好了。

Answer 3

我认为已经提供的解决方案更好，但如果您想知道如何使用 map 实现，这里有一种方法：

const data = [
  { randomid1: { name: 'lorem', latinName: 'ipsem' } },
  { randomid2: { name: 'lorem2', latinName: 'ipsem2' } }
];

const id = 'randomid2';

const newdata2 = data.map((elt) => {
  if (elt[id]) {
    return {[id] : {...elt[id], name: "new Name"}};
  }
 return elt;
});

console.log(newdata2)

更新嵌套对象的反应状态数组

Update react State array of nested objects

javascript

arrays

object

ecmascript-6

reactjs