使用 .filter 从带有 react/javascript 的对象数组中删除一个项目答案

【问题标题】：using .filter to delete an item from an array of objects with react/javascript使用 .filter 从带有 react/javascript 的对象数组中删除一个项目
【发布时间】：2019-11-10 11:43:12
【问题描述】：

我正在使用 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) 相同。看起来映射和过滤有问题，不知道到底是什么。任何帮助将不胜感激。

【问题讨论】：

@JackBashford Id 传入
id in showDeleteConfirmation 参数是什么意思？

标签： javascript arrays reactjs object ecmascript-6

【解决方案1】：

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

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

或更详细的数组表示法：

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

【讨论】：

你是对的，但我在两个控制台日志中仍然得到相同的结果。提到删除工作正常

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

在我看来，您可以将每个项目传递给过滤函数并使用其id 与filterId 进行比较。

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

【讨论】：

这不是问题，我按照你说的改了，什么也没发生。