1
votes

L'itération sur JSON et le rendu des éléments de la table ne donnent aucun résultat

J'essaie de créer un composant de table réutilisable dans React mais je n'ai pas de chance pour l'instant quand il s'agit de rendre mes s.

Je passe mes accessoires requis de Composant TableList à mon composant TableRow comme ceci:

     const TableRow = props => {
    const { data } = props;

    return (
        <tr>
            {Object.keys(data).forEach(function(item) {
                console.log(data[item]); // This prints out my JSON objects just fine
                <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
            })}
        </tr>
    );
};
  et dans  TableRow  Je peux itérer sur mes objets JSON très bien, mais mon élément n'est pas rendu. Je n'obtiens aucune erreur, mais mon élément   dans le DOM n'a pas d'enfant. Voici mon composant  TableRows :  
    const TableList = props => {
    const { listData, listHeaders } = props;

    return (
        <table className="table table-striped">
            <thead>
                <tr>
                    {listHeaders.map(header => (
                        <th scrope="col" key={header}>
                            {header}
                        </th>
                    ))}
                    <th scope="col" />
                </tr>
            </thead>
            <tbody>
                {listData.map(data => (
                    <TableRow
                        key={data.id}
                        data={data}
                        handleClick={props.handleClick}
                    />
                ))}
            </tbody>
        </table>
    );
};
  J'ai essayé d'assigner mes objets JSON à un tableau pour  .map ()  navigation mais cela aussi, est venu avec le même résultat. J'ai également essayé de déplacer divers éléments tels que   et   de haut en bas de l'arborescence des composants sans succès.

javascript reactjs arrays

0 commentaires

3 Réponses :

1
votes

Vous devez renvoyer les éléments JSX de votre boucle. Comme

return (
  <tr>
    {Object.keys(data).map(function(item) {
      console.log(data[item]); // This prints out my JSON objects just fine
      return <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
    })}
  </tr>
);

Array # forEach renvoie indéfini . Et pour le moment, vous rendez indéfini . Vous pouvez utiliser Array # map qui est utilisé pour transformer le tableau d'entrée et renvoie un tableau.

0 commentaires

1
votes

Vous devez corriger deux choses

Vous devez changer forEach () avec Array.prototype.map () car forEach () renvoie indéfini .
Vous devez utiliser () au lieu de {} . Si vous souhaitez utiliser {} , utilisez return avant jsx à l'intérieur de la fonction

Voici le code.

<tr>
   {Object.keys(data).map((item) => (
         <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
    )}
</tr>

0 commentaires

0
votes

const TableRow = props => {
const { data } = props;

    return (
        <tr>
            {Object.keys(data).map(function(item) {
                return <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
            })}
        </tr>
    );
};

0 commentaires