1

このアプリケーションには、react js および Tracker React と一緒に Meteor 1.3 を使用しています。アプリケーションで使用可能なすべてのユーザーを表示するページがあります。このページでは、データを表示するためにユーザーがログインする必要があります。ユーザーがログインしていない場合、ログイン フォームが表示され、ログインすると、コンポーネントはユーザーのデータをレンダリングします。

ロジックのメイン コンポーネント。

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 回表示されます。最初のレンダリングでは現在のユーザーのデータのみが表示され、2 番目のレンダリングではすべてのユーザーのデータがレンダリングされ (目的の結果)、3 番目のレンダリングでは現在のユーザーのデータのみが再びレンダリングされます。

ページを更新すると、ユーザー データが正しく表示されます。

理由はありますか？

4

1 に答える 1

1

React はrender()実行中にコンポーネントのメソッドを何度も呼び出します。予期しない呼び出しが発生している場合は、通常、何かがコンポーネントへの変更をトリガーし、再レンダリングを開始している場合です。何かが への呼び出しを上書きしている可能性があるようですMeteor.users.find().fetch()。これは、各レンダリングでその関数を呼び出しているために発生している可能性があります。render メソッドの外側で値を調べてみるか、テストに頼って、コンポーネントが本来あるべき動作をしていることを確認してください:)

https://facebook.github.io/react/docs/component-specs.html#renderから

render() 関数は純粋である必要があります。つまり、コンポーネントの状態を変更せず、呼び出されるたびに同じ結果を返し、DOM から読み書きしたり、ブラウザーと対話したりしません (たとえば、 setTimeout)。ブラウザと対話する必要がある場合は、代わりに componentDidMount() またはその他のライフサイクル メソッドで作業を実行してください。render() を純粋に保つことで、サーバー レンダリングがより実用的になり、コンポーネントが考えやすくなります。

以下も参照してください。

于 2016-04-21T02:46:29.300 に答える