Impossible de lire la propriété 'map' undefined

Je suis à la suite de la reactjs tutoriel, et je continue de courir dans un problème lors du passage de la valeur de l'état d'un composant dans un autre composant. L'erreur " Impossible de lire la propriété 'map' undefined' est levée lorsque la fonction map dans le CommentList composante est exécutée. Quelle serait la cause de la prop pour devenir non défini lors du passage de la CommentBox dans le CommentList?

  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function (comment){
        return (
          <div>
            <h1>{comment.author} </h1>
          </div>
        );
      });
      return (
        <div className="commentList">
          {commentNodes}
        </div>
      );
    }
  });

  var CommentBox = React.createClass({
    getInitialState: function(){
      return {data: []};
    },
    getComments: function(){
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data){
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err){
          console.error(url, status, err.toString());
        }.bind(this)
      });
    },
    componentWillMount: function(){
      this.getComments()
    },
    render: function(){
      return (
        <div className="commentBox">
          {/*this.state.data.comments*/}
          {<CommentList data={this.state.data.comments}/>}
        </div>
      );
    }
  });

  React.renderComponent(
    <CommentBox url="comments.json" />,
    document.getElementById('content')
  );

InformationsquelleAutor Nael | 2014-07-11

reactjs

36

Tout d'abord, de définir la sécurité des données initiales:
```
getInitialState : function() {
    return {data: {comments:[]}};
},
```
Et vous assurer que vos données ajax.

Cela devrait fonctionner si vous suivez au-dessus de deux instructions comme La démo.

Mise à jour: vous pouvez juste envelopper les .carte de bloc avec l'instruction conditionnelle.
```
if (this.props.data) {
  var commentNodes = this.props.data.map(function (comment){
      return (
        <div>
          <h1>{comment.author}</h1>
        </div>
      );
  });
}
```
- Cette solution a fonctionné, mais je suis curieux. Si j'en ai une plus compliqué structure JSON, aurais-je initialiser l'objet de données de la même façon? Il semble qu'il devrait y avoir une meilleure façon. Merci
- Non, vous n'avez pas besoin d'. Juste envelopper le bloc comme ci-dessus. 🙂
- Cela fonctionne, mais quelle est la cause de l'erreur?
- L'erreur se produit car this.props.data est null. .map s'attend à être appelé sur un tableau.
- merci pour la réponse. Je comprends this.props.data est null, qui a causé la fonction map à l'échec. Mais ce que je ne comprends pas, c'est que le tutoriel code fonctionne sans la clause if. Pourquoi this.props.data n'est pas nulle dans le tutoriel?
- this.props.data est peuplée par la requête AJAX. L'AJAX est asynchrone, donc si le composant est rendu avant que les données sont remplies, this.props.data sera nulle et vous obtiendrez l'erreur. Est-il logique?
- Salut @timothyclifford, puis-je le mettre en utilisant des accessoires et de geting le josn depuis le côté serveur? Je suis nouveau dans de Réagir, je pense que les données ne changera pas après avoir lancé donc je veux utiliser des accessoires pour mettre en œuvre cette. Mais le problème, comme vous, disent les accessoires.les données sont NULL
- Salut @MichaelMao aimeriez-vous poser votre question séparément et montrer le code que vous avez alors nous pouvons vous aider à résoudre tous les problèmes.
- Salut @timothyclifford Dans le final, j'utilise l'état pour mettre en œuvre et il fonctionne bien maintenant. Je vous remercie pour votre réponse.
- une grande réponse, merci pour l'enregistrement du temps
- Cela fonctionne aussi, var commentNodes = this.props.data && this.props.data.map(function (comment){ return ( <div> <h1>{comment.author}</h1> </div> ); });
InformationsquelleAutor taggon

Je pense que vous avez oublié de changer

data={this.props.data}

data={this.state.data}

dans la fonction rendu de CommentBox. J'ai fait la même erreur lorsque j'étais en suivant le tutoriel. Ainsi, l'ensemble de la fonction rendu devrait ressembler à

render: function() {
  return (
    <div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.state.data} />
      <CommentForm />
    </div>
  );
}

au lieu de

render: function() {
  return (
    <div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.props.data} />
      <CommentForm />
    </div>
  );

InformationsquelleAutor finrod

Vous avez besoin de mettre les données avant de les rendre

Devrait ressembler à ceci:

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

React.render(
  <CommentBox data={data}/>,
  document.getElementById('content')
);

Au lieu de cela:

React.render(
  <CommentBox data={data}/>,
  document.getElementById('content')
);

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

InformationsquelleAutor Liliang Zhu

1

L'erreur "Cannot read property 'map' of undefined" sera présente si il y a une erreur dans le "this.props.data" ou il n'y a pas d'accessoires.tableau de données.

Mieux de mettre une condition pour vérifier que le tableau comme
```
if(this.props.data){
this.props.data.map(........)
.....
}
```
InformationsquelleAutor Sayeed roshan

Vous devez vous connecter pour publier un commentaire.