1
votes

Comment supprimer un élément d'un tableau de valeurs clés?

Je veux supprimer un élément spécifique d'un tableau, j'obtiens la clé de l'élément à partir de l'entrée. Je veux pouvoir supprimer l'élément uniquement en connaissant la clé.

Voici le tableau:

  removeSplitAmount(e) {
    console.log("remove",e.target.name)
    let array = [...this.state.splitAmount];
    let  index = this.state.splitAmount.IndexOf(p => p == e.target.name )
    if (index !== -1) {
        array.splice(index, 1);
        this.setState({splitAmount: array});
    }
}

Fonction de suppression:

state ={
    splitAmount : [{
        "SplitAmount0": this.props.data.amount1
    }, {
        "SplitAmount1": this.props.data.amount2
    }, {
        "SplitAmount2": this.props.data.amount3
    }]
}


3 Réponses :


1
votes

Comme Dmitry l'a dit, vous ne pouvez pas faire un indexOf sur un tableau d'objets ... je me sentais mal de ne pas m'en rendre compte. Serait utile sur ce cas: var beasts = ['fourmi', 'bison', 'chameau', 'canard', 'bison'];

beasts.indexOf ('bison')

Dans votre cas, il est préférable d'utiliser la méthode .filter comme indiqué dans les réponses ci-dessus car vous recherchez un objet avec une propriété spécifique


1 commentaires

indexOf ne prend pas lambda comme paramètre. Sauf si vous souhaitez trouver un index d'un lambda dans un tableau de lambdas.



2
votes

Vous pouvez utiliser la méthode .filter sur le tableau combinée avec les Object.keys pour nettoyer beaucoup la fonction:

removeSplitAmount(e) {
    const newSplitAmount = this.state.splitAmount
      .filter(p => !Object.keys(p).includes(e.target.name));

    this.setState({ splitAmount: newSplitAmount });
}


1 commentaires

Assurez-vous d'inclure un polyfill pour la fonction «comprend» si vous avez besoin de prendre en charge des navigateurs plus anciens comme IE11



1
votes

Vous pouvez utiliser hasOwnProperty pour filtrer les objets dont vous avez besoin.

removeSplitAmount(e) {
  const newSplitAmount = this.state.splitAmount
    .filter(x => !x.hasOwnProperty(e.target.name));

  this.setState({ splitAmount: newSplitAmount });
}


1 commentaires

Je pense que c'est la meilleure réponse même si la variable «newSplitAmount» n'est même pas nécessaire et pourrait être supprimée si vous voulez encore moins de code