web-dev-qa-db-fra.com

Rendre un tableau.map () dans React

J'ai un problème lorsque j'essaie d'utiliser un tableau de données pour rendre un élément <ul>. Dans le code ci-dessous, le console.log fonctionne correctement, mais les éléments de la liste n'apparaissent pas. 

var Main = React.createClass({
  getInitialState: function(){
    return {
      data: dataRecent
    }
  },

  render: function(){
    return (
      <div>
        <ul>
          {
           this.state.data.map(function(item, i){
             console.log('test');
             <li>Test</li>
           })
         }
        </ul>
      </div>
    )
  }
});

ReactDOM.render(<Main />, document.getElementById('app'));

Qu'est-ce que je fais mal? N'hésitez pas à signaler tout ce qui ne correspond pas aux meilleures pratiques. Merci.

javascriptreactjs
14
Andrey von Emme

Gosha Arinich a raison, vous devriez renvoyer votre élément <li> . Cependant, vous devriez néanmoins recevoir un avertissement rouge désagréable dans la console du navigateur. 

Chaque enfant d'un tableau ou d'un itérateur doit avoir un accessoire "clé" unique.

alors, vous devez ajouter "clé" à votre liste:

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

ou lâchez la console.log() et créez une belle ligne à l'aide des fonctions es6 arrow :

this.state.data.map((item,i) => <li key={i}>Test</li>)

MISE À JOUR IMPORTANTE: 

La réponse ci-dessus résout le problème actuel, mais comme Sergey mentionné dans les commentaires: utiliser la clé en fonction de l’index de la carte est BAD si vous voulez filtrer et tri. Dans ce cas, utilisez le item.id si id déjà présent ou générez simplement des identifiants uniques.

38
Dmitry Birin

Vous ne revenez pas. Changer en

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>;
})
3
Gosha Arinich

Vous retournez implicitement undefined. Vous devez retourner l'élément.

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>
})
2
Daniel A. White
let durationBody = duration.map((item, i) => {
      return (
        <option key={i} value={item}>
          {item}
        </option>
      );
    });
0
Najma Muhammed