web-dev-qa-db-fra.com

Comment boucler un objet dans JSX en utilisant React.js

J'ai donc un composant React.js et je souhaite parcourir un objet que j'importe d'importer pour y ajouter des options HTML. Voici ce que j'ai essayé, qui est à la fois moche et qui ne marche pas:

import React from 'react';
import AccountTypes from '../data/AccountType';

const AccountTypeSelect = (props) => {  
  return (
    <select id={props.id} className = {props.classString} style={props.styleObject}>
        <option value="nothingSelected" defaultValue>--Select--</option>
        {
            $.each(AccountTypes, function(index) {
                <option val={this.id}>this.name</option>
            })
        }
    </select>
  );
};

export default AccountTypeSelect;

J'ai reçu cette erreur dans la console du code ci-dessus:

invariant.js? 4599: 38 - Violation invariante non capturée: les objets ne sont pas valides en tant qu'enfant de React (trouvés: objet avec les clés {id, nom, activé, additionalInfo}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau ou enveloppez l'objet à l'aide de createFragment (objet) à partir des add-ons de React. Vérifiez la méthode de rendu de AccountTypeSelect.

Dois-je vraiment convertir chaque objet en tableau ou l'envelopper avec createFragment pour l'utiliser? Quelle est la meilleure pratique pour ce cas?

javascriptreactjsreact-jsxjsx
7
twilco

Au lieu de $.each, utilisez map:

{AccountTypes.map(function(a) {
     return (
         <option key={a.id} val={a.id}>{a.name}</option>
     );
 })}
7
Kevin

Points à noter:

Vos données sont dans un objet et non dans un tableau: pour le parcourir en boucle, vous devrez donc utiliser Object.keys (votreObjet) .map () au lieu de votreObjet.map ().

Avec ça en tête ; voici la solution

var user = {
     fname:'John',
     lname : 'Doe',
     email:'[email protected]'
}

class App extends Component {
  render() {
    return (
      <p>
      <ul>
        {
          Object.keys(user).map((oneKey,i)=>{
            return (
                <li key={i}>{user[oneKey]}</li>
              )
          })
        }

      </ul>    
      </p>
    );
  }
}
5
Daggie Blanqx

Vous devriez utiliser map pour faire une boucle:

{AccountTypes.map((accountType) => 
  <option value={accountType.id}>{accountType.name}</option>)}
0
Matteo Frana

pour rendre une liste d'enfants, vous devez ajouter l'attribut key pour chaque enfant afin que React les rende correctement.Essayez ceci:

Avec la carte JQuery (bon pour la programmation fonctionnelle)

   {
        $.map(AccountTypes, function(type,index) {
            return <option key={type.id} val={type.id}>type.name</option>
        })
    }

Avec carte normale:

{AccountTypes.map((type) => {
   return <option key={type.id} 
                  val={type.id}>
            {type.name}
          </option>
)}
0
Phi Nguyen