使分页与React Komposer一起工作

Getting pagination to work with React Komposer

本文关键字：一起 工作 Komposer React 分页      更新时间：2023-09-26

我使用的是Meteor 1.3.4.1、kurounin:pagination 1.0.9和react-komposer 1.8.0 (npm package)。

下面是我在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的正确用法吗?我注意到分页会不断地加载订阅，并且永远不会准备好显示数据。控制台的输出会反复显示"loading pages"，但不会显示"ready"。

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

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

通过kurounin:pagination的项目维护者得到了答案，这是我更新的代码，确认可以与react 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);

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

相关文章：