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

问题描述

我在 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","product_option_value_id": "266"
            }

        ]
    },{
        "default": 0,"name": "Water","product_option_value_id": "700"
            },"name": "50ml","product_option_value_id": "701"
            },"name": "500ml","product_option_value_id": "702"
            },"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);
          });
        
    }

解决方法

好吧，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)};
    });
}