Question

我正在使用Meteor 1.3.4.1，kurounin：分页1.0.9和react-komposer 1.8.0（npm包）。

所以这是我在编写器函数中实例化分页的代码：

function composer(props, onData) {
  console.log('loading pages');
  const pagination = new Meteor.Pagination(UfcFighters);

  if( pagination.ready() ) {
    console.log('ready');
    const fighters = {
      columns: [
        { width: '5%', label: '', className: '' },
        { width: '20%', label: 'Name', className: 'text-center' },
        { width: '20%', label: 'Wins/Losses/Draws', className: 'text-center' },
        { width: '20%', label: 'Weight Class', className: 'text-center' },
        { width: '10%', label: 'Status', className: 'text-center' },
        { width: '10%', label: 'Rank', className: 'text-center' },
      ],
      data: pagination.getPage(),
    };
    onData(null, { fighters, pagination });
  }
};

这是否适用于React Komposer？我注意到Pagination将不断加载订阅，并且永远不会准备好呈现数据。控制台输出会反复说“加载页面”，但它从不说“准备好”。

任何建议都将受到赞赏。

Answer 1

看起来对我很好，我认为如果分页没有准备就你需要返回。

function composer(props, onData) {
  const pagination = new Meteor.Pagination(UfcFighters);
  if(!pagination.ready()) { return; }
  const fighters = {
    columns: [
      { width: '5%', label: '', className: '' },
      { width: '20%', label: 'Name', className: 'text-center' },
      { width: '20%', label: 'Wins/Losses/Draws', className: 'text-center' },
      { width: '20%', label: 'Weight Class', className: 'text-center' },
      { width: '10%', label: 'Status', className: 'text-center' },
      { width: '10%', label: 'Rank', className: 'text-center' },
    ],
    data: pagination.getPage(),
  };
  onData(null, { fighters, pagination });
};

Answer 2

通过kurounin:pagination的项目维护人员得到了答案，这是我的更新代码，经过确认与反应komposer合作：

const pagination = new Meteor.Pagination(UfcFighters, {
  sort: { id: 1 }
});

function composer(props, onData) {
  const fighterDocs = pagination.getPage();

  if( pagination.ready() ) {
    const fighters = {
      columns: [
        { width: '5%', label: '', className: '' },
        { width: '20%', label: 'Name', className: 'text-center' },
        { width: '20%', label: 'Wins/Losses/Draws', className: 'text-center' },
        { width: '20%', label: 'Weight Class', className: 'text-center' },
        { width: '10%', label: 'Status', className: 'text-center' },
        { width: '10%', label: 'Rank', className: 'text-center' },
      ],
      data: fighterDocs,
    };
    onData(null, { fighters, pagination });
  }
};

export default composeWithTracker(composer)(FightersList);

我将分页实例移到了作曲家函数之外，因为它不断地实例化新的Paginations并使应用程序陷入困境。现在它运行顺利。

希望这有助于其他人。

分页与React Komposer合作

2 个答案: