javascript - 在 React 中更新数组中的元素(使用过滤器/ map )

Question

我有一个结构如下的数组:

this.state.mainArray= [{
    "Upperelement1": "12345",
    "Upperelement2" : [
        {
          Key1:'ok1',Key2:'ok2',Key3:'ok3'
        },
        {
          Key1:'ok4',Key2:'ok6',Key3:'ok7'
        },
        ]
    },
    {
    "Upperelement1": "6789",
    "Upperelement2" : [
        {
          Key1:'ok8',Key2:'ok9',Key3:'o10'
        },
        {
          Key1:'ok11',Key2:'ok12',Key3:'ok13'
        },
        ]
     }
    ]

想法是遍历数组并找到 Upperelement1 = 12345 和 Key1:'ok1' 的元素(键的值是唯一的)并向 Upperelement2 添加另一个键，key4。更新后，数组将如下所示:

  [{
    "Upperelement1": "12345",
    "Upperelement2" : [
        {

        Key1:'ok1',Key2:'ok2',Key3:'ok3',Key4:'somevalue'
        },
        {
          Key1:'ok4',Key2:'ok6',Key3:'ok7'
        },
        ]
    },
    {
    "Upperelement1": "6789",
    "Upperelement2" : [
        {
          Key1:'ok8',Key2:'ok9',Key3:'o10'
        },
        {
          Key1:'ok11',Key2:'ok12',Key3:'ok13'
        },
        ]
     }
    ]

我试过类似的方法:

mainArray.map(items => if (items. Upperelement1 == '12345')

• 但这行不通，有什么想法可以实现吗？我们可以使用过滤器吗？

Answer 1

您可以使用 find() , some() , 和 map()这样做。

var data = [{ Upperelement1: "12345", Upperelement2: [{ Key1: "ok1", Key2: "ok2", Key3: "ok3" }, { Key1: "ok4", Key2: "ok6", Key3: "ok7" }, ] }, { Upperelement1: "6789", Upperelement2: [{ Key1: "ok8", Key2: "ok9", Key3: "o10" }, { Key1: "ok11", Key2: "ok12", Key3: "ok13" }, ] } ]; 

data.find(item =>
    item.Upperelement1 === "12345" &&
    item.Upperelement2.some(value => value.Key1 === "ok1")
  )
  .Upperelement2.map(item => {
    if (item.Key1 === "ok1") {
      item["Key4"] = "somevalue";
    }
    return item;
  });

console.log(data);