React JS компонент рендерится несколько раз в Meteor

Question

Я использовал Meteor 1.3 для этого приложения вместе с реагировать на js и Tracker React. У меня есть страница для просмотра всех доступных пользователей в приложении. Эта страница требует от пользователя входа в систему для просмотра данных. Если пользователь не вошел в систему, он покажет форму входа в систему, и после входа в систему компонент отобразит данные пользователя.

Основной компонент для логики.

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

И в AllUserdata составная часть:

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>

            )
    }   
};

Проблема заключается в том, что при входе в систему отображаются только данные текущего пользователя. Все остальные объекты пользователя не отображаются. Если я проверю на консоли, console.log('User objects ' + this.allusers()); показать объекты, которые визуализируются 3 раза: первый рендер отображает только данные текущего пользователя, второй рендерит данные для всех пользователей (желаемый результат), а третий снова отображает только данные текущего пользователя.

Если я обновлю страницу, пользовательские данные будут отображены правильно.

Есть идеи почему?

Answer 1

Реагировать называет render() метод компонентов много раз, когда он работает. Если вы сталкиваетесь с неожиданными вызовами, обычно случается так, что что-то вызывает изменения в вашем компоненте и инициирует повторную визуализацию. Кажется, что-то может переписать вызов Meteor.users.find().fetch(), что, вероятно, происходит потому, что вы вызываете эту функцию при каждом рендеринге. Попробуйте проверить значение вне метода рендеринга или, что еще лучше, положитесь на тесты, чтобы убедиться, что ваш компонент делает то, что должен быть:)

С https://facebook.github.io/react/docs/component-specs.html

Функция render() должна быть чистой, это означает, что она не изменяет состояние компонента, она возвращает один и тот же результат каждый раз, когда вызывается, и она не читает и не пишет в DOM или иным образом не взаимодействует с браузером (например, используя SetTimeout). Если вам нужно взаимодействовать с браузером, вместо этого выполняйте свою работу в componentDidMount() или других методах жизненного цикла. Поддержание render() в чистоте делает рендеринг сервера более практичным и облегчает понимание компонентов.

Смотрите также:

• https://facebook.github.io/react/docs/advanced-performance.html
• https://facebook.github.io/react/docs/top-level-api.html
• https://ifelse.io/2016/04/04/testing-react-components-with-enzyme-and-mocha/