gpt4 book ai didi

javascript - ReactJs 上的无限循环渲染组件

转载 作者:数据小太阳 更新时间:2023-10-29 05:29:19 25 4
gpt4 key购买 nike

我遇到了无限循环问题,但我看不出是什么触发了它。它似乎在渲染组件时发生。

我有三个组件,组织如下:

TimelineComponent
|--PostComponent
|--UserPopover

TimelineComponenet:

React.createClass({
mixins: [
Reflux.listenTo(TimelineStore, 'onChange'),
],
getInitialState: function() {
return {
posts: [],
}
},
componentWillMount: function(){
Actions.getPostsTimeline();
},
render: function(){
return (
<div className="timeline">
{this.renderPosts()}
</div>
);
},
renderPosts: function (){
return this.state.posts.map(function(post){
return (
<PostComponenet key={post.id} post={post} />
);
});
},
onChange: function(event, posts) {
this.setState({posts: posts});
}
});

后置组件:

React.createClass({
...
render: function() {
return (
...
<UserPopover userId= {this.props.post.user_id}/>
...
);
}
});

用户弹出框:

module.exports = React.createClass({
mixins: [
Reflux.listenTo(UsersStore, 'onChange'),
],
getInitialState: function() {
return {
user: null
};
},
componentWillMount: function(){
Actions.getUser(this.props.userId);
},
render: function() {
return (this.state.user? this.renderContent() : null);
},
renderContent: function(){
console.log(i++);
return (
<div>
<img src={this.state.user.thumbnail} />
<span>{this.state.user.name}</span>
<span>{this.state.user.last_name}</span>
...
</div>
);
},
onChange: function() {
this.setState({
user: UsersStore.findUser(this.props.userId)
});
}
});

最后还有UserStore**:

module.exports = Reflux.createStore({
listenables: [Actions],
users: [],
getUser: function(userId){
return Api.get(url/userId)
.then(function(json){
this.users.push(json);
this.triggerChange();
}.bind(this));
},
findUser: function(userId) {
var user = _.findWhere(this.users, {'id': userId});
if(user){
return user;
}else{
this.getUser(userId);
return [];
}
},
triggerChange: function() {
this.trigger('change', this.users);
}
});

UserPopover 组件外,一切正常。

对于每个 PostComponent 渲染一个 UserPopOver,它在 willMount 循环中获取数据。

问题是,如果你注意到我在 UserPopover 组件中有这行代码 console.log(i++);,它会不断递增

...
3820
3821
3822
3823
3824
3825
...

清除一个死循环,但我真的不知道它来自哪里。如果有人能给我提示,我将不胜感激。

PS:我已经在 UsersStore 中尝试过这种方法,但是所有的 PostComponent 都有相同的“用户”:

...
getUser: function(userId){
return Api.get(url/userId)
.then(function(json){
this.user = json;
this.triggerChange();
}.bind(this));
},
triggerChange: function() {
this.trigger('change', this.user);
}
...

并且在 UserPopover

...
onChange: function(event, user) {
this.setState({
user: user
});
}
...

最佳答案

因为您的帖子是异步获取的,我相信当您的 UserPopover 组件执行它的 componentWillMount 时,props.userId 未定义,然后您调用 UsersStore.findUser(this.props.userId),在 UserStore 中,getUser 是调用是因为它在本地存储中找不到用户。

请注意,每次 getUser 的 ajax 完成时,它都会触发。于是UserPopover组件执行onChange函数,再次调用UsersStore.findUser。那是一个无限循环。

请在UserPopover的componentWillMount中添加一个console.log(this.props.userId)看看是不是像我上面说的那样。我其实不是100%确定的。

这是所有UserPopover 实例共享同一个UserStore 的问题,我认为我们应该重新考虑这些组件和存储的结构。但是我还没有想出最好的办法。

关于javascript - ReactJs 上的无限循环渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33929744/

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