2
votes

Rendre un corps de tableau en réaction à l'aide de la fonction map

Je suis nouveau dans la react. Ici, j'ai une donnée qui se trouve dans le tableau. Je veux rendre ces données de table en utilisant la fonction de carte, ce que j'ai essayé est,

    <tbody>
                { this.props.jobList.length > 0 &&  this.props.jobList.content.map(function (item, key) {
                  return (
                    <tr key={key}>
                      <td>1</td>
                      <td>2</td>
                      <td>3</td>
                      <td>4</td>
                      <td>5</td>
                      <td>6</td>
                      <td>7</td>
                    </tr>
                  )
                })}
</tbody>

{
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "hrmsJdId": null,
        "companyId": null}]
}

Ici, j'ai des données dans la liste de tâches mais cela ne rend toujours pas ce contenu td. Quelqu'un peut-il m'expliquer Comment puis-je faire cela? Ou où je me trompe?

javascript reactjs redux

10 commentaires

jobList est un tableau ou jobList.content ?

jobList est un tableau et le contenu est un objet

Vous devez alors mapper sur jobList , au lieu de jobList.content car la carte est définie sur un tableau

Les parenthèses aident-elles? {(this.props.jobList.length> 0) && this.props.jobList.content.map (fonction

Si jobList est un tableau, mappez-le. jobList.content est-il un tableau?

Je l'ai utilisé mais il ne montre toujours pas les données dans le tableau,

Pourriez-vous expliquer à quoi ressemblent exactement vos données et ce que vous souhaitez afficher

Je viens de mettre à jour ma question

@ganeshkaspate, les données avec lesquelles vous venez de mettre à jour votre question, est-ce un objet dans le tableau jobList ou dans sa jobList elle-même. voulez-vous également rendre la table avec le contenu?

oui je veux rendre la table avec le contenu qui est un tableau à l'intérieur d'un objet this.props.jobsList

4 Réponses :

0
votes

Sur la base de vos commentaires et des données que vous avez fournies, il semble que vous deviez rendre le contenu dans jobList pour lequel vous devez utiliser une carte imbriquée comme

<tbody>
    {this.props.jobList && this.props.jobList.length > 0 && this.props.jobList.map((item, key) => {
        return (
          <React.Fragment>
             {item.content.map(job => (
                  <tr key={job.id}>
                     <td>id: {job.id}</td>
                     <td>company: {job.company}</td>
                   </tr>
             ))}
          </React.Fragment>
        )
    })}
</tbody>

4 commentaires

Non, ça me donne la longueur d'undefined

Cela ne rend pas les données de la table

Utilisez-vous la version 16 de React? Avez-vous également une erreur

Oui, j'utilise la version 16 car elle contient le fragment

1
votes

Vous devez mapper vos données de tableau ( this.props.jobList ) au lieu de l'objet. render doit être comme ceci:

<tbody>
    {this.props.jobList && this.props.jobList.content && this.props.jobList.content.length > 0 && this.props.jobList.content.map((item, key) => {
        return (
            <tr key={key}>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
        )
    })}
</tbody>

9 commentaires

En fait maintenant, il ne donne aucune erreur mais il ne montre pas ces données

@ganeshkaspate Veuillez me donner vos données this.props.jobList

En fait, this.props.jobList est un objet dans lequel le contenu est un tableau d'objets

@ganeshkaspate pourriez-vous s'il vous plaît poster vos données d'exemple de this.props.jobList

Mise à jour des données

@ganeshkaspate J'ai mis à jour ma réponse, veuillez l'essayer.

Hé merci pour ça. J'ai une autre question sur le fait que si les données proviennent des accessoires de diff pour l'élément de ligne diff comme le premier td provient d'un autre accessoire, le second est d'un autre sur sept 4 éléments, les données proviennent d'un accessoire et l'autre vient de un autre accessoire alors comment dois-je gérer cette condition

Avant d'afficher les résultats dans le tableau, créez un tableau factice des données requises à partir de différents accessoires, puis utilisez une fonction de carte sur le tableau nouvellement créé pour afficher le tableau.

@ganeshkaspate veuillez marquer ma réponse comme résolue si cela vous aide. Avec votre question supplémentaire, donnez-moi un exemple, votre état est très déroutant, je ne comprends pas ce dont vous avez besoin.

1
votes

Je pense que vous devriez faire comme ceci:

var {jobList} = this.props;
var result = null;
if(jobList.length >0){
   result = jobList.map(value,key){
       return (
          <tr key={key}>
             <td>{value.content.id}</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
          </tr>
       );
   }
}
return (
    <tbody>
        {result}
    </tbody>
);

0 commentaires

0
votes

Voici une solution que j'ai testée à l'intérieur d'un composant basé sur les classes.

render()
{
    return(
        <tbody>
            {this.props.jobList && this.props.jobList.content && this.props.jobList.content.length > 0 && this.props.jobList.content.map((item, key) => {
                    return(
                    <tr key={key}>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                    </tr>
                )

            })}


        </tbody>    
    
    )

}

Ça a l'air intéressant aussi, en particulier pour les personnes qui commencent tout juste à réagir. Rend la syntaxe organisée un peu plus complète.

0 commentaires