对映射数组进行分页答案

【问题标题】：Paginate a mapped array对映射数组进行分页
【发布时间】：2018-07-20 04:03:32
【问题描述】：

我正在尝试对数组进行分页我对反应还很陌生，不知道从哪里开始

我正在尝试对这个事件列表进行分页，所以它只在页面上显示 9 个事件当还有更多时，您可以单击 2 或 3 等查看更多我不知道如何实现分页

class EventsList extends PureComponent {

  componentWillMount() {
    this.props.getAllEvents();
  }

  getEvent(eventId) {
    this.props.getEvent(eventId);
  }

  addEvent = event => {
    this.props.addEvent(event);
  };

  render() {
    const now = Moment();
    const { events, authenticated } = this.props;
    const eventsList = events.sort((a, b) =>{
     return a.id - b.id;
   });

    if (!authenticated) return <Redirect to="/login" />;

    return <div>
        <Paper className="styles" elevation={4}>
          <h1>Coming Events</h1>
          <table>
            <thead>
              <tr>
                <th>Event Name</th>
                <th>Starts</th>
                <th>Ends</th>
                <th>Short description</th>
              </tr>
            </thead>
            <tbody>
              {eventsList.map(event => <tr key={event.id}>
                  <td>

                <Link className="link" to={`/events/${event.id}`} onClick={() => this.getEvent(event.id)}>
                      {event.name}
                    </Link>
                  </td>

                  {now && <td style={{ border: "2px solid black" }}>

                      {Moment(event.startDate).format("ll")}
                    </td>}
                  {now && <td style={{ border: "2px solid black" }}>

                      {Moment(event.endDate).format("ll")}
                    </td>}

                  <td />

                  <td style={{ border: "2px solid green"  }}>
                    {event.description}
                  </td>

                  <td />
                </tr>)}
            </tbody>
          </table>
          <br />
          <br />
          <Link className="link" to={`/addEvent`}>
            Add An Event
          </Link>
        </Paper>
      </div>;
  }
}
const mapStateToProps = function(state) {
  return {
    events: state.events,
    event: state.event,
    authenticated: state.currentUser !== null,
    users: state.users === null ? null : state.users
  };
};
export default connect(
  mapStateToProps,
  {
    getAllEvents,
    getEvent,
    addEvent,
    getUsers
  }
)(EventsList);

我在看 http://pagination.js.org 和https://www.npmjs.com/package/react-js-pagination

但我不明白我应该如何实现它。如果有人可以给我一些指示？还是一个简单的例子？

【问题讨论】：

标签： javascript reactjs pagination

【解决方案1】：

您将需要跟踪一些项目。首先是事件的总数。第二个当前页面。第三，每页的项目数（您要设置的常数）。

然后您可以对 events 数组执行任意数量的操作以仅显示这些项目。

例如，您可以使用数组切片https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice -- 这将为您返回一个仅包含您想要的项目的新数组。

因此，要获得第二页项目 (10 - 19)，您将根据页码和每页项目数计算开始和结束索引，然后得到类似的结果。

const numberPerPage = 9;
const startIndex = 10; // Computed based on your numbers
const endIndex = startIndex + numPerPage;
const pagedEvents = eventsList.slice(startIndex, endIndex);

这将为您提供一个列表，其中仅包含该页面的项目。更新页码将导致页码更改和列表更新。

【讨论】：