使用.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)
...