11
Sono nuovo di ReactJS e ho provato le mie mani su un progetto semplice. Fondamentalmente, lo snippet crea un elenco di amici da un array e visualizza il numero totale di amici.Errore di stack massimo di chiamate superato in ReactJS. Qualcuno può aiutare a spiegare cosa sta succedendo? (Snippet on JSFiddle)
Per qualche ragione, ho capito la funzione incrementFriendsCount lancia un "Errore massimo stack di chiamate superato" quando aggiungo un nuovo amico
Il frammento di codice che segue è anche available on JSFiddle.
var HelloUser = React.createClass({
getInitialState: function() {
return {
name: "Toyosi",
friends: ["Susanna", "Jibola", "Worreva"],
friendsCount: 0
}
},
addFriends: function(friend) {
this.setState({
friends: this.state.friends.concat([friend])
});
},
componentWillMount: function() {
this.setState({
friendsCount: this.state.friends.length
});
},
incrementFriendsCount: function() {
this.setState({
friendsCount: this.state.friends.length
});
},
render: function() {
return (<div>
Villain: {
this.state.name
}, No of friends: {
this.state.friendsCount
} < br/>
< AddingTheFriend addNew = {
this.addFriends
}
incCount = {
this.incrementFriendsCount
}
/>
<ListFriends enemies={this.state.friends}/>
< /div>
);
}
});
var ListFriends = React.createClass({
propTypes: {
\t enemies: React.PropTypes.array.isRequired
},
render: function() {
\t var allFriends = this.props.enemies.map(function(friend){
\t return <li>{friend}</li > ;
});
return (<div> Her evil friends:
<ul> {
allFriends
} < /ul>
</div >
)
}
});
var AddingTheFriend = React.createClass({
getInitialState: function() {
return {
newFriend: ''
}
},
propTypes: {
addNew: React.PropTypes.func.isRequired
},
updateNewFriend: function(change) {
this.setState({
newFriend: change.target.value
});
},
addTheFriend: function() {
this.props.addNew(this.state.newFriend);
this.setState({
newFriend: ''
})
},
componentWillReceiveProps: function() {
this.props.incCount();
},
render: function() {
return (<div>
< input type = "text"
value = {
this.state.newFriend
}
onChange = {
this.updateNewFriend
}
/>
<button type="button" onClick={this.addTheFriend}>Add Friend</button >
< /div>
)
}
});
React.render(<HelloUser/> , document.getElementById('app'));<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="app"></div>Io apprezzo se qualcuno potrebbe gettare più luce sul motivo per cui è gettato questo errore.
Sta funzionando bene per me. L'unico avviso che sto vedendo riguarda 'className' (vedi: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components) – pmilla1606