Javascript Girl
  1. Javascript Girl
  3. React.js this.props.data.map () n'est pas une fonction
Intereting Posts
Obtenir la position du caret dans le contenuEditable div Données POST angulaires dans $ _POST pour php Accès à l'usine défini dans un autre module en angularjs Concepteur d'objets Javascript versus objet littéral Javascript – définissez une variable à l'aide de la concaténation de chaînes Jquery droppable – Greedy ne fonctionne pas comme prévu Utilisation de MetricsGraphics.js avec ReactJS Supprimez la classe CSS de l'élément avec JavaScript (pas jQuery) Comment obtenir des références d'objet javascript ou un nombre de référence? Close ne semble pas fonctionner avec WebSocket Comment recharger Google Analytics intégrer api dans ajax Comment itérer sur les enfants avec la boucle Fusion de la toile et du fond RegEx – Obtenez tous les caractères après la dernière barre oblique dans l'URL Appelez la méthode objective-c à partir de javascript

React.js this.props.data.map () n'est pas une fonction

Je suis en train de réagir et d'essayer d'analyser et de rendre un objet json. En ce moment, je l'ai simplement configuré avec un objet codé pour tester et ne pas l'avoir depuis un appel ajax. 

<script type="text/jsx"> var Person = React.createClass({ render: function() { return ( <div> <p className="personName"></p> <p className="personSA1"></p> <p className="personSA2"></p> <p className="zip"></p> <p className="state"></p> <p className="country"></p> </div> ); } }); var PersonDiv = React.createClass({ render: function() { var personNodes = this.props.data.map(function(personData){ return ( <Person personName={personData.person.firstname} personSA1={personData.person.street1} personSA2={personData.person.street2} zip={personData.person.zip} state={personData.person.state} country={personData.person.country}> </Person> ) }); return ( <div> {personNodes} </div> ); } }); React.render( <PersonDiv data={data} />, document.getElementById('jsonData') );

Je définis la variable de données avec 

 <script> var data = "[" + '<%=data%>' + "]"; </script>

L'objet de données est celui que je crée sur le côté java d'un portlet. Je sais que le json est valide, car je peux utiliser JSON.parse (json) pour analyser et traverser la chaîne, mais je continue d'obtenir que cette carte () ne soit pas une fonction.

Il semble que vos données ne soient pas un objet json, c'est une chaîne. Vous devez probablement exécuter data = JSON.parse(data); Pour convertir vos données en un objet javascript réel pour pouvoir l'utiliser. Un test facile pour cela serait de courir 

 <script> var data = "[" + '<%=data%>' + "]"; console.log(data); console.log(JSON.parse(data)); </script>

Vous devriez remarquer la différence.

Vous console.log résultat de console.log comme premier paramètre de React.render : 

 React.render( console.log("inside render"), <PersonDiv data={data} />, document.getElementById('jsonData') );

Il devrait être comme: 

 console.log("will render"); React.render( <PersonDiv data={data} />, document.getElementById('jsonData') );