javascript - 如何使用 React 在 Meteor 1.5.2 上进行分页？

Question

我正在尝试在最新的 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({........

Answer 1

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

Cannot read property 'ready' of null

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

所以您的分页不起作用(如@styx 所建议的)- 可能是您的发布和订阅代码中的问题。您应该能够从那里解决。

如果您可以在这里发帖，您可以节省很多时间

1. 阅读错误信息并解释它们
2. 编写检查函数调用返回的防御代码。

如果你想成为熟练的程序员，这些是你应该遵循的基本编程技术