11
Jestem nowy w ReactJS i próbowałem swoich sił w prostym projekcie. Zasadniczo, fragment tworzy listę znajomych z tablicy i wyświetla całkowitą liczbę znajomych.Maksymalny stos połączeń przekroczył błąd w ReactJS. Czy ktoś może pomóc ci wyjaśnić, co się dzieje? (Snippet on JSFiddle)
Z jakiegoś powodu, zdałem sobie sprawę, funkcja incrementFriendsCount rzuca „Maximum stosu wywołań przekroczyła błąd” kiedy dodać nowego przyjaciela
Fragment kodu poniżej jest również 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>będę wdzięczny, jeśli ktoś może rzucić więcej światła na to, dlaczego ten błąd jest generowany.
To działa dobrze dla mnie. Jedyne ostrzeżenie, które widzę dotyczy "className" (zobacz: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components) – pmilla1606