更新嵌套对象的反应状态数组[重复]答案

【问题标题】：Update react State array of nested objects [duplicate]更新嵌套对象的反应状态数组[重复]
【发布时间】：2021-12-23 05:54:49
【问题描述】：

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

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

我需要使用其中一项的新名称和/或 latinName 更新此数组（比如说 randomid1.name 。

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

【问题讨论】：

我不知道这是否适合您，但如果可能的话，我会将 ID 移动到具有名称和 latinName 的对象中。结构越扁平，就越容易使用。尤其是因为 ID 的 value 是对象 key，所以不能像 item.id == 1 那样简单地进行比较。
@BrianThompson 我会喜欢的，但我创建嵌套对象的方式来自我之前问过的这个问题：stackoverflow.com/questions/69785811/… 我看到我要求一个嵌套对象，但我确实喜欢这个 id成为其他项目的一部分。但是，当它来自 Firestore 时，不要认为这是可能的 ..

标签： javascript arrays reactjs object ecmascript-6

【解决方案1】：

您可以使用Array#find 和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);

【讨论】：

我还不明白，但它有效！这是伟大的。我会做更多的研究，非常感谢！

【解决方案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
    }
  }
}

您可以移动此功能并在找到项目后返回以获得更好的性能。

PS : 数据结构似乎有点难以使用，如果您可以将其更改为您正在搜索的内容所索引的内容，那就太好了。

【讨论】：

谢谢，这真的很有帮助！我会考虑使数据结构更容易，因为它在整个代码中都让我头疼

【解决方案3】：

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

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)

【讨论】：