我们如何轻松地从 React js 中的多维数组对象中删除元素答案

【问题标题】：How can we easily remove an element from an multi dimensional array object in react js我们如何轻松地从 React js 中的多维数组对象中删除元素
【发布时间】：2021-02-19 15:10:02
【问题描述】：

我正在 React Js 中工作。我很难删除与“product_option_value_id”对应的项目。如果给定的 itemId==product_option_value_id，我需要从 product_option_value（子数组对象）中删除项目，并在删除指定的项目后返回整个数组对象。我想这个想法很清楚。我尝试了一种方法，但我没有定义。

        "default": 0,
        "master_option": 0,
        " master_option_value": 0,
        "maximum": 0,
        "minimum": 0,
        "name": "Choose Size",
        "option_id": "4",
        "product_option_id": "111",
        "product_option_value": [{
                "ec_product_id": "",
                "exclude_others": "0",
                "image": "",
                "master_option_value": "0",
                "name": "25ml",
                "option_value_id": "8",
                "points": "0",
                "product_option_value_id": "267"
            },
            {
                " ec_product_id": "22w",
                "exclude_others": "0",
                "image": "",
                "master_option_value": "0",
                "name": "25ml",
                "option_value_id": "8",
                "points": "0",
                "product_option_value_id": "266"
            }

        ]
    },
    {
        "default": 0,
        "master_option": 0,
        " master_option_value": 0,
        "maximum": 0,
        "minimum": 0,
        "name": "Water",
        "option_id": "4",
        "product_option_id": "111",
        "product_option_value": [{
                "ec_product_id": "",
                "exclude_others": "0",
                "image": "",
                "master_option_value": "0",
                "name": "25ml",
                "option_value_id": "8",
                "points": "0",
                "product_option_value_id": "700"
            },
            {
                " ec_product_id": "22w",
                "exclude_others": "0",
                "image": "",
                "master_option_value": "0",
                "name": "50ml",
                "option_value_id": "8",
                "points": "0",
                "product_option_value_id": "701"
            },
            {
                " ec_product_id": "22w",
                "exclude_others": "0",
                "image": "",
                "master_option_value": "0",
                "name": "500ml",
                "option_value_id": "8",
                "points": "0",
                "product_option_value_id": "702"
            }, {
                " ec_product_id": "22w",
                "exclude_others": "0",
                "image": "",
                "master_option_value": "0",
                "name": "500ml",
                "option_value_id": "8",
                "points": "0",
                "product_option_value_id": "703"
            }

        ]
    }
]

我试过的方法

 const removeOption=(itemId:any)=>{
                const filteredItems =  productOptions.forEach(function(o:any) {
            o.product_option_value = o.product_option_value.filter((s:any) => s.product_option_value_id != itemId);
          });
        
    }

【问题讨论】：

标签： javascript arrays json reactjs arrayobject

【解决方案1】：

好吧，forEach 方法不返回数组，这就是为什么你得到undefined 作为结果。这个方法只是对每个元素执行一个函数：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

所以你需要改用.map() 方法：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

基本上是这样：

const removeOption = (itemId: any) => {
    return productOptions.map((o: any) => {
        return { ...o, product_option_value: o.product_option_value.filter((s: any) => s.product_option_value_id !== itemId)};
    });
}

【讨论】：