2

そのため、Meteor のフロント エンドとして ReactJS を使用していますが、何か不足していない限り、reactive-var を使用してニュース フィードを更新する方法がわかりません。以下は私が今持っているコードです：

Dashboard = React.createClass({
    mixins: [ ReactMeteorData ],
    getMeteorData() {
        let subscription = Meteor.subscribe( 'newsFeed' );
        let page = new ReactiveVar();
        page.set(0);

        return {
            isLoading: !subscription.ready(),
            news: News.find({}, {limit: 3, skip: (page.get() * 3), sort: {createdDate: 1}}).fetch(),
            page: page,
            totalCount: Counts.get( 'newsCounter' )
        };
    },
    componentDidMount() {

    },
    newer() {
        this.data.page.set(this.data.page.get() + 1);

        console.log(this.data.page.get());
    },
    older() {
        if(this.data.page.get() > 0)
            this.data.page.set(this.data.page.get() - 1);

        console.log(this.data.page.get());
    },
    render() {
        if ( this.data.isLoading ) {
            return <Loading />;
        } else {
            return (
                <div>
                    <NewsList news={this.data.news} />
                    <ul className="pager">
                        <li className={this.data.page.get() <= 0 ? 'previous disabled' : 'previous' } onClick={this.older}><a href="#">← Older</a></li>
                        <li className="next" onClick={this.newer}><a href="#">Newer →&lt;/a></li>
                    </ul>
                </div>
            );
        }
    }
});

現在、新しいボタンをクリックすると、ページ変数がインクリメントされるように見えますが、1 を超えることはなく、古いボタンは 1 から 0 に戻るように見えますが、100% 確実ではありません。リアクティブ変数のどこが間違っているのかわかりません。明らかなBlazeと同じように機能しないことはわかっていますが、それらの使用方法の説明や例が見つからないようです。

例、修正、または素晴らしいドキュメントへのリンクだけで、誰かが私を助けることができれば.

4

1 に答える 1

3

ページ変数を getInitialState に移動する必要があります。

Dashboard = React.createClass({
    mixins: [ ReactMeteorData ],
    getInitialState() {
        let page = new ReactiveVar(0);
        return { page };
    },
    getMeteorData() {
        let subscription = Meteor.subscribe( 'newsFeed' );

        return {
            isLoading: !subscription.ready(),
            news: News.find({}, {limit: 3, skip: (page.get() * 3), sort: {createdDate: 1}}).fetch(),
            totalCount: Counts.get( 'newsCounter' )
        };
    },
    componentDidMount() {

    },
    newer() {
        this.state.page.set(this.state.page.get() + 1);

        console.log(this.state.page.get());
    },
    older() {
        if(this.state.page.get() > 0)
            this.state.page.set(this.state.page.get() - 1);
    },
    render() {
        if ( this.data.isLoading ) {
            return <Loading />;
        } else {
            return (
                <div>
                    <NewsList news={this.data.news} />
                    <ul className="pager">
                        <li className={this.state.page.get() <= 0 ? 'previous disabled' : 'previous' } onClick={this.older}><a href="#">← Older</a></li>
                        <li className="next" onClick={this.newer}><a href="#">Newer →&lt;/a></li>
                    </ul>
                </div>
            );
        }
    }
});
于 2015-11-02T16:01:02.987 に答える