gpt4 book ai didi

reactjs - ReactJS 中超出最大调用堆栈错误。有人可以帮忙解释一下发生了什么事吗? (JSFiddle 上的片段)

转载 作者:行者123 更新时间:2023-12-03 13:11:30 25 4
gpt4 key购买 nike

我是 ReactJS 的新手,正在尝试一个简单的项目。基本上,该代码片段从数组创建好友列表并显示好友总数。

出于某种原因,我意识到当我添加新 friend 时,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: {
enemies: React.PropTypes.array.isRequired
},
render: function() {
var allFriends = this.props.enemies.map(function(friend){
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>

如果有人能更详细地解释为什么会抛出此错误,我将不胜感激。

最佳答案

您正在 componentWillReceiveProps 中调用 this.props.incCount,它设置父组件的状态,效果将是 AddingTheFriend再次渲染,并再次调用 this.props.incCount 。因此堆栈溢出。

另一个建议是,通常您要小心并在尽可能少的组件中尽可能少地使用 setState。只需在将新 friend 连接到父组件状态的同时增加 friend 数量即可。

这是codepen --我认为比 JSFiddle 好得多。

关于reactjs - ReactJS 中超出最大调用堆栈错误。有人可以帮忙解释一下发生了什么事吗? (JSFiddle 上的片段),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32716885/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com