Javascript 在React中更新数组中的元素（使用过滤器/映射）

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

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'

（键的值是唯一的） 并将另一个键添加到

上部元素2

，

键4

。更新后，数组将如下所示：

  [{
    "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')

• 但这是行不通的， 你有没有想过如何做到这一点？ 我们能用过滤器吗

您可以使用2张地图

const newValues = mainArray.map((item) => {
  if (item.Upperelement1 !== '12345') {
    return item
  }

  return {
      ...item,
      Upperelement2: item.Upperelement2.map(upper => {
        if(upper.Key1 !== 'ok1') {
          return upper 
        }

        return {
          ...upper,
          Key4:'somevalue',
        }
      })
    }
})

你可以用2张地图

const newValues = mainArray.map((item) => {
  if (item.Upperelement1 !== '12345') {
    return item
  }

  return {
      ...item,
      Upperelement2: item.Upperelement2.map(upper => {
        if(upper.Key1 !== 'ok1') {
          return upper 
        }

        return {
          ...upper,
          Key4:'somevalue',
        }
      })
    }
})

您可以使用，并且可以这样做

var数据=[{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.Upperelement1==“12345”&&
item.upperElement 2.some（value=>value.Key1==“ok1”）
)
.Upperelement2.map（项=>{
如果（item.Key1==“ok1”）{
项[“键4”]=“somevalue”；
}
退货项目；
});
控制台日志（数据）您可以使用，并且可以使用


var数据=[{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.Upperelement1==“12345”&&
item.upperElement 2.some（value=>value.Key1==“ok1”）
)
.Upperelement2.map（项=>{
如果（item.Key1==“ok1”）{
项[“键4”]=“somevalue”；
}
退货项目；
});
控制台日志（数据）我认为这样使用嵌套的
map
很简单

arr.map(function(item){
   if (item.Upperelement1 === '12345'){
        return {
            Upperelement1: item.Upperelement1,
            Upperelement2: item.Upperelement2.map(function(obj){
                if (obj.Key1 === 'ok1'){
                    return Object.assign({}, obj, { Key4: 'somevalue'});
                }
                return obj;
            })
        };
   }
    return item;
})

我认为它很简单，像这样使用嵌套的
map

arr.map(function(item){
   if (item.Upperelement1 === '12345'){
        return {
            Upperelement1: item.Upperelement1,
            Upperelement2: item.Upperelement2.map(function(obj){
                if (obj.Key1 === 'ok1'){
                    return Object.assign({}, obj, { Key4: 'somevalue'});
                }
                return obj;
            })
        };
   }
    return item;
})