web-dev-qa-db-fra.com

Obtenir la taille du tableau renvoyé par la carte dans le rendu de React

J'utilise array.map dans ma méthode render d'un composant React. Cela fonctionne, mais je veux savoir combien de lignes il rend. J'essaie en initialisant this.numRows = 0 dans mon constructeur, puis en l'incrémentant dans le callback map:

<div>
        <p>Number of rows = {this.numRows}</p>
        {this.state.members.map((member) => {
          if (member.display) {
            this.numRows++;
            return <p>{ member.name }</p>  
          }
        })}
      </div>

Mais cela montre toujours zéro. Code complet ici: jsfiddle.net/ra13jxak/ . Comment puis-je afficher le nombre de lignes renvoyées?

javascriptarraysreactjs
3
GluePear

Vous pouvez envisager de filtrer d'abord les membres que vous souhaitez afficher, puis d'afficher la longueur du tableau résultant et de les mapper pour rendre les membres:

Fiddle

render() {
    const membersToRender = this.state.members.filter(member => member.display)
    const numRows = membersToRender.length

    return (
      <div>
        <p>Number of rows = {numRows}</p>
        {
          membersToRender.map((member, index) => {
            return <p key={index}>{ member.name }</p>
          })
        }
      </div>
    );
  }

Edit: Merci Edgar Henriquez, j'ai corrigé l'avertissement de propriétés de clé comme vous l'avez suggéré

5
Michael Horn

Je pense que c'est une bonne idée de l'extraire au composant:

Exemple JSFiddle

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      members: [
        ..
      ],

      visibleMembers() {
        return this.members.filter(m => m.display)
      }
    }
  }

  render() {
    const members =  this.state.visibleMembers()

    return (
      <div>
        <p>Number of rows = {members.length}</p>
        {members.map(m => <p key={ m.id }>{ m.name }</p>)}
      </div>
    )
  }
}

J'ai ajouté l'attribut key pour supprimer un avertissement. Vous pouvez en savoir plus à ce sujet sur React Documentation .

2
Danil Speransky

Vous pouvez utiliser le filtre pour générer un nouveau tableau, puis l’utiliser pour afficher le nombre de lignes et le parcourir. Comme ça:

const members = this.state.members.filter(member => member.display)
return (
  <div>
    <p>Number of rows = { members.length }</p>
    {members.map(member => <p>{ member.name }</p>)}
  </div>
)
1
Cesar William

utilisez simplement ceci:

{this.state.members.length}
0
Mohammad Zebardast

Utilisez simplement le filtre sur this.state.members sur une certaine condition qui est un attribut d'affichage dans votre cas.

Ayez simplement une division entourant les éléments et obtenez le nombre d'éléments réellement rendus, ou vous pouvez utiliser la méthode use the length après l'application d'un filtre ayant certaines conditions. 

Implémentez Render comme ceci:

render(){
    return (
    <div>
       <p>Number of rows = {this.numRows}</p>
       <div id="members-with-display">
         {(this.state.members.filter((value)=>{return value.display})).map((member) => {
             return <p>{ member.name }</p>  
         })}
    </div>
    </div>
    );
}

Vous pouvez avoir une fonction pour connaître les lignes rendues comme:

getRenderedRows(){
//Either you can use this
return document.getElementById("members-with-display").childElementCount;
 // Or this
return this.state.members.filter((value)=>{return value.display}).length;
}
0
Muhammad Danial Iqbal