javascript - 使用 React Komposer 进行分页

Question

我正在使用Meteor 1.3.4.1、kurounin:pagination 1.0.9和react-komposer 1.8.0(npm包)。

这是我在 Composer 函数中实例化分页的代码:

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 的正确用法吗？我注意到分页会不断加载订阅，并且永远不会准备好呈现数据。控制台输出会重复显示“正在加载页面”，但从未显示“就绪”。

如有任何建议，我们将不胜感激。

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 });
};