Réagir JS - Uncaught TypeError: ce.accessoires de jeu.les données.la carte n'est pas une fonction

La .map fonction n'est disponible que sur le tableau.

Il ressemble à data n'est pas dans le format que vous attendez qu'il soit (c'est {} mais vous attendez []).

this.setState({data: data});

devrait être

this.setState({data: data.conversations});

Vérifier ce type de "données" est en cours de mis à, et assurez-vous que c'est un tableau.

Code modifié avec quelques recommandations (propType de la validation et de la fonction clearInterval):

var converter = new Showdown.converter();
var Conversation = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="conversation panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
{this.props.id}
{this.props.last_message_snippet}
{this.props.other_user_id}
</h3>
</div>
<div className="panel-body">
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
</div>
);
}
});
var ConversationList = React.createClass({
//Make sure this.props.data is an array
propTypes: {
data: React.PropTypes.array.isRequired
},
render: function() {
window.foo            = this.props.data;
var conversationNodes = this.props.data.map(function(conversation, index) {
return (
<Conversation id={conversation.id} key={index}>
last_message_snippet={conversation.last_message_snippet}
other_user_id={conversation.other_user_id}
</Conversation>
);
});
return (
<div className="conversationList">
{conversationNodes}
</div>
);
}
});
var ConversationBox = React.createClass({
loadConversationsFromServer: function() {
return $.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data.conversations});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
/* Taken from 
https://facebook.github.io/react/docs/reusable-components.html#mixins
clears all intervals after component is unmounted
*/
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
},
componentDidMount: function() {
this.loadConversationsFromServer();
this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="conversationBox">
<h1>Conversations</h1>
<ConversationList data={this.state.data} />
</div>
);
}
});
$(document).on("page:change", function() {
var $content = $("#content");
if ($content.length > 0) {
React.render(
<ConversationBox url="/conversations.json" pollInterval={20000} />,
document.getElementById('content')
);
}
})

Plus généralement, vous pouvez également convertir les nouvelles données dans un tableau et d'utiliser quelque chose comme concat:

var newData = this.state.data.concat([data]);  
this.setState({data: newData})

Ce modèle est en fait utilisé dans Facebook la ToDo de démonstration de l'application (voir la section "Demande") à https://facebook.github.io/react/.

Cela se produit parce que le composant est rendu avant le async données arrivée, vous devez les maîtriser avant de rendre.

Je l'ai résolu de cette façon:

render() {
let partners = this.props && this.props.partners.length > 0 ?
this.props.partners.map(p=>
<li className = "partners" key={p.id}>
<img src={p.img} alt={p.name}/> {p.name} </li>
) : <span></span>;
return (
<div>
<ul>{partners}</ul>
</div>
);
}

• Carte ne peut pas résoudre lorsque la propriété est null/indéfini, donc j'ai fait un contrôle de premier

this.props && this.props.partners.length > 0 ?