2
votes

Comment filtrer les éléments d'un tableau affiché à l'écran dans React?

J'apprends les bases de React et suis tombé sur ce défi qui m'a posé beaucoup de problèmes.

J'ai une liste d'éléments dans la fonction "état". Lorsque je les liste à l'écran, je voudrais lister ceux qui ont la valeur «found = 0». J'ai essayé de rechercher sur le Web, j'ai essayé d'appliquer tant de solutions différentes, y compris celles d'ici dans stackoverflow, mais j'ai continué à recevoir tellement d'erreurs différentes que je ne pouvais pas le faire fonctionner.

Voici ma fonction 'état' enregistrée dans mon fichier App.js:

  render() {
return (
  <div className="list-group">
    <span className="font-weight-bold list-group-item list-group-item-action flex-column align-items-start">
      {this.props.counter.title}
      <span className="font-weight-normal text-secondary float-right">
        {this.foundMessage()}
      </span>
    </span>
    <div className="row">
      <button
        onClick={() => this.props.onFind(this.props.counter)}
        className="btn btn-sm col-3 btn-primary col-6"
      >
        Found it!
      </button>
      <button
        onClick={() => this.props.onDelete(this.props.counter.id)}
        className="btn btn-danger btn-sm col-6"
      >
        No more needed!
      </button>
    </div>
  </div>
);}}

Et voici le code counter.jsx qui affiche mes éléments:

  state = {
counters: [
  { id: 1, title: "Soymilk", found: 1, value: 0 },
  { id: 2, title: "Mushroom", found: 0, value: 0 },
  { id: 3, title: "Tomatoes", found: 1, value: 0 },
  { id: 4, title: "Potatoes", found: 0, value: 0 },
  { id: 5, title: "Meat", found: 0, value: 0 },
  { id: 6, title: "Beans", found: 0, value: 0 },
  { id: 7, title: "Bread", found: 0, value: 0 }
]};

javascript react-native

0 commentaires

4 Réponses :

0
votes

Vous pouvez utiliser la fonction filter du tableau. Comme ceci

var ages = [32, 33, 16, 40];

checkObj = (obj) => {
  return obj > 16;
}

let val = ages.filter(checkObj)

//val contains the filtered array with found == 0


// or you can use this way

let val = this.state.counters.filter((obj)=>{
              return obj.found == 0;
          })

J'espère que ça aide, si je ne comprends pas votre problème. Veuillez répondre

0 commentaires

2
votes

Vous pouvez filtrer vos données,

comme ceci,

let filteredData= this.state.counters.filter(item=>item.found==0);
this.setState({counters:filteredData});

0 commentaires

0
votes

vous pouvez utiliser la fonction de carte qui renvoie un nouveau tableau avec une opération se déroulant dans son rappel pour chaque élément.

function filterCounters(){
   let newCounters = [];
    counter.map(element=>{
    if(element.found === 0 ){
      newCounters.push(element);
      }
})
return newCounters;
}

0 commentaires

0
votes

Vous pouvez utiliser les méthodes Array .filter et .map , mais ce n'est pas le seul moyen.

Voici un exemple qui fait exactement ce dont vous avez besoin.

2 commentaires

L'utilisation simultanée de la carte et du filtre m'a beaucoup aidé à comprendre. Merci beaucoup!

Je vous en prie! Je vous encourage à utiliser la carte, filtrer et réduire autant que possible.