web-dev-qa-db-fra.com

Rendu React Composants d'un tableau d'objets

J'ai des données appelées stations qui est un tableau contenant des objets.

stations : [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]

Je voudrais rendre un composant d'interface utilisateur pour chaque position de tableau. Jusqu'ici je peux écrire

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.Push(
         <div className="station">
             {this.data}
         </div>
     )
 }

Et ensuite rendre

render(){
 return (
   {stationsArr}
 )
}

Le problème est que toutes les données sont imprimées. Au lieu de cela, je veux simplement montrer une clé comme {this.data.call} mais cela n'imprime rien.

Comment puis-je parcourir ces données et retourner un nouvel élément d'interface utilisateur pour chaque position du tableau?

javascriptreactjs
76
thatgibbyguy

Vous pouvez mapper la liste des stations sur ReactElements.

Avec React> = 16, il est possible de renvoyer plusieurs éléments du même composant sans avoir besoin d'un wrapper d'élément HTML supplémentaire. Depuis 16.2, il existe un nouvelle syntaxe <> pour créer des fragments. Si cela ne fonctionne pas ou n'est pas supporté par votre IDE, vous pouvez utiliser <React.Fragment> à la place. Entre 16.0 et 16.2, vous pouvez utiliser un très simple polyfill pour les fragments.

Essayez ce qui suit

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});

var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

N'oubliez pas l'attribut key!

https://jsfiddle.net/69z2wepo/14377/

129
Sebastien Lorber

J'ai une réponse qui pourrait être un peu moins déroutante pour les débutants comme moi. Vous pouvez simplement utiliser map dans la méthode de rendu des composants.

render () {
   return (
       <div>
           {stations.map(station => <div> {station} </div>)} 
       </div>
   );
}
36
Thomas Valadez

this.data contient probablement toutes les données, vous devez donc faire quelque chose comme ceci:

var stations = [];
var stationData = this.data.stations;

for (var i = 0; i < stationData.length; i++) {
    stations.Push(
        <div key={stationData[i].call} className="station">
            Call: {stationData[i].call}, Freq: {stationData[i].frequency}
        </div>
    )
}

render() {
  return (
    <div className="stations">{stations}</div>
  )
}

Ou vous pouvez utiliser map et les fonctions de flèche si vous utilisez ES6:

const stations = this.data.stations.map(station =>
    <div key={station.call} className="station">
      Call: {station.call}, Freq: {station.frequency}
    </div>
);
5
Dominic