使用.filter从带有React / javascript的对象数组中删除项目

Question

我正在使用javascript的.filter函数从此对象数组中通过TypeMp3List中的ID删除元素。格式如下：

例如在删除带有ID:33390的MP3时进行过滤后，我想要的格式是：

这是我到目前为止构建的代码：

  showDeleteConfirmation(value, id, index, thisHandler) {
    confirm({
      title: 'Voulez vous supprimer cette audio ?',
      content: '',
      okText: 'Oui, je confirme',
      okType: 'danger',
      cancelText: 'Non',
      onOk() {
       deleteMp3Request(id);
       var { extraitMP3 } = thisHandler.state;

        var array = [];
        for (var key in extraitMP3) {
          array.push(extraitMP3[key]);
        }
        console.log('array',array)

        const result = array.map(d => ({ 
          ...d, 
          TypeMp3List: 
              Object.fromEntries(
                Object.entries(d.TypeMp3List).filter(index => index !== id)
              ) 
        }))
        console.log('result',result)


       thisHandler.setState({result: result})
       NotificationManager.success("le fichier audio est supprimé avec succès !", "");
     },
     onCancel() {
     },
    });  
  }

问题是在映射和过滤console.log(result)之后给了我console.log(array)相同的结果。映射和筛选似乎出了点问题，不知道到底是什么。任何帮助将不胜感激。

Answer 1

因为您使用Object.entries-这将返回一个二维数组（例如包含数组的数组），并且在您的filter中，您正在检查每个数组是否等于一个数字。不是。您要访问此数组的第一个元素-因此可以进行一些解构：

Object.entries(d.TypeMp3List).filter(([index]) => index !== id)

或更详细的数组符号：

Object.entries(d.TypeMp3List).filter(index => index[0] !== id)

Answer 2

由于您要基于.filter验证的新数组，请尝试返回比较结果：

Object.fromEntries(
    Object.entries(d.TypeMp3List).filter((index) => {
        return index !== id
    )};
)

Answer 3

我认为您在使用filter函数时犯了一个错误。

我认为，您可以将每个项目传递给过滤器功能，并使用其id与filterId进行比较。

showDeleteConfirmation(value, filterId, index, thisHandler) {
...
   Object.entries(d.TypeMp3List).filter(listItem => listItem.id !== filterId)
...