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

我面临无限循环问题，看不到是什么触发了它。渲染组件时似乎会发生这种情况。

我有三个组成部分，组织方式如下:

TimelineComponent
   |--PostComponent
         |--UserPopover

时间轴组件:

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});
    }
});

PostComponent :

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

UserPopover :

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)
      });
   }
});

最后，还有UsersStore **:

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++);，它会一遍又一遍地递增

Clearl是一个无限循环，但我真的不知道它从哪里来。如果有人能给我一个提示，我将非常感激。

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的问题，我认为我们应该重新考虑这些组件和存储的结构。但是我还没有想出最好的方法。