Impossible de lire la propriété 'map' undefined
Je suis le tutoriel reactjs, et je continue à rencontrer 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. Qu'est-ce qui ferait que l'accessoire deviendrait indéfini lors du passage de la boîte de commentaires dans la liste de commentaires?
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')
);
3 réponses
Tout d'abord, définissez des données initiales plus sûres:
getInitialState : function() {
return {data: {comments:[]}};
},
Et assurez-vous que vos données ajax.
Cela devrait fonctionner si vous suivez les deux instructions ci-dessus comme Démo.
Mise à jour: vous pouvez simplement envelopper le .bloc de carte avec instruction conditionnelle.
if (this.props.data) {
var commentNodes = this.props.data.map(function (comment){
return (
<div>
<h1>{comment.author}</h1>
</div>
);
});
}
Je pense que vous avez oublié de changer
data={this.props.data}
À
data={this.state.data}
Dans la fonction de rendu de CommentBox. J'ai fait la même erreur quand je suivais le tutoriel. Ainsi, toute la fonction de 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>
);
Vous devez mettre les données avant le rendu
Devrait être comme 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 ceci:
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"}
];