React JS component renders multiple times upon logged-in


#1

I using Meteor 1.3 for this application together with react js and Tracker React. I have a page to view all available users in the application. This page require user to login to view the data. If user not logged in, it will shows the login form and once logged-in the component will render the user’s data.

Main component for the logic.

export default class MainLayout extends TrackerReact(React.Component) {

    isLogin() {
        return Meteor.userId() ? true : false
    }
    render() {

        if(!this.isLogin()){
            return (<Login />)
        }else{
        return (
            <div className="container">
                <AllUserdata  />            
            </div>
          )
        }
    }
}

And in the AllUserdata component:

export default class Users extends TrackerReact(React.Component) {

    constructor() {
        super();

        this.state ={
            subscription: {
                Allusers : Meteor.subscribe("AllUsers")
            }
        }

    }

    componentWillUnmount(){
        this.state.subscription.Allusers.stop();
    }

    allusers() {
        return Meteor.users.find().fetch();
    }

    render() {
        console.log('User objects ' + this.allusers());
        return (
                <div className="row">
                    {
                    this.allusers().map( (user, index)=> {
                            return <UserSinlge key={user._id} user={user} index={index + 1}/>
                            })
                     }


                </div>

            )
    }   
};

The problem is when logged in, it only shows the current user’s data. All other user objects are not rendered. If I check on the console, console.log('User objects ’ + this.allusers()); show objects being rendered 3 times: the first render only shows the current user’s data, the second one renders data for all users (the desired result), and the third one again renders only the current user’s data.

If I refresh the page, the the user data will be rendered properly.

I doubt that this is caused by the Meteor user login mechanism or using Tracker React on both component.

Any idea?