11
मैं रेक्टजेएस के लिए नया हूं और एक साधारण परियोजना पर अपने हाथों की कोशिश कर रहा था। असल में, स्निपेट एक सरणी से दोस्तों की एक सूची बनाते हैं और दोस्तों की कुल संख्या प्रदर्शित करता है।अधिकतम कॉल स्टैक ReactJS में त्रुटि से अधिक है। क्या कोई यह समझाने में मदद कर सकता है कि क्या हो रहा है? (JSFiddle पर स्निपेट)
किसी कारण से, मुझे एहसास हुआ कि incrementFriendsCount समारोह एक "अधिकतम कॉल स्टैक को पार कर त्रुटि" फेंकता है जब मैं एक नए दोस्त
नीचे कोड स्निपेट भी 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>अगर कोई क्यों इस त्रुटि फेंक दिया जाता है के बारे में अधिक प्रकाश फेंक सकता है मैं सराहना करेंगे।
यह मेरे लिए ठीक काम कर रहा है। एकमात्र चेतावनी जो मैं देख रहा हूं वह 'क्लासनाम' के संबंध में है (देखें: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components) – pmilla1606