我怎样才能对Meteor 1.5.2进行分页处理?

时间:2017-09-13 12:35:26

标签: javascript reactjs meteor pagination

我正在尝试在最新的Meteor 1.5.2上实现分页 我得到下面的消息无限(消息重复一遍又一次直到cpu高):

TypeError: Cannot read property 'ready' of null
    at GridPaging.setDisplayedPages (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:120887)
    at GridPaging.componentWillReceiveProps (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:120871)
    at modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:18243
    at measureLifeCyclePerf (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:17708)
    at ReactCompositeComponentWrapper.updateComponent (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:18242)
    at ReactCompositeComponentWrapper.receiveComponent (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:18179)
    at Object.receiveComponent (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:10730)
    at Object.updateChildren (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:17442)
    at ReactDOMComponent._reconcilerUpdateChildren (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:16976)
    at ReactDOMComponent._updateChildren (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:17080)

请帮助找出解决方案,我的代码如下:

ui / pages / ReactiveRegisters.js用户界面

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { Link } from 'react-router-dom';
import { Row, Col, Button } from 'react-bootstrap';
import { createContainer } from 'meteor/react-meteor-data';
import { Registers } from '../../api/registers';
import BootstrapPaginator from 'react-bootstrap-pagination';
import Loading from '../../components/Loading';

class ReactiveRegisters extends Component {
    constructor(props) {
        super(props);


    }
    renderRegister(register) {
        return (
            <li key={register._id}>{register.firstname}</li>
        );
    }

    render() {
        return ( !this.props.loading ? (
        <div>
            <ul>
                {this.props.registers.map(this.renderRegister)}
            </ul>
            <BootstrapPaginator
                pagination={this.props.pagination}
                limit={10}
                containerClass="text-center"
            />
        </div>
        ) : <Loading />);
    }
}

ReactiveRegisters.propTypes = {
    registers: PropTypes.array.isRequired,
    loading: PropTypes.bool.isRequired,
    pagination: PropTypes.object,
};

export default createContainer(() => {  
    pagination = new Meteor.Pagination(Registers, {
        filters: {},
        sort: {},
        perPage: 10,
        reactive: true,
        debug: true,
    });
    return {
        loading: !pagination.ready(),
        registers: pagination.getPage(),
  };
}, ReactiveRegisters);

server / publications.js发布集合。

import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';
import { Events } from '../events';
import { Registers } from '../registers';
import { publishPagination } from 'meteor/kurounin:pagination'

publishPagination(Registers);

api / registers.js来定义集合。

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Registers = new Mongo.Collection('registers');

Meteor.method({........

1 个答案:

答案 0 :(得分:1)

只需阅读错误消息 - 它告诉您:

Cannot read property 'ready' of null

在代码中查找ready,它会显示它可能发生的位置。您发布的代码中只有一个位置,因此这意味着pagination变量为空,即对new Meteor.Pagination的调用未返回任何内容。

所以你的分页不起作用(正如@styx建议的那样) - 可能是你的发布和订阅代码中的一个问题。你应该能够从那里开始工作。

如果你

,你可以节省很多时间
  1. 阅读错误消息并解释它们
  2. 编写用于检查函数调用返回的防御性代码。
  3. 如果你想成为一名熟练的程序员,这些是你应该遵循的基本编程技术