<分区>
我正在 React 项目中实现分页,但在返回 ul 中的一组 li 元素时遇到问题。在控制台中,renderPageNumbers 返回未定义,而我能够看到传递的数组并注销每个元素映射迭代器。箭头 li 出现在页面上,但假设介于两者之间的 li 没有出现。
我相信我正确地返回了 map 语句,所以我不知道我需要做什么才能完成这项工作。
在组件的render方法中调用了RenderPagination。
这是我的简化代码:
renderPageNumbers(pageNumbersArray) {
pageNumbersArray.map((pageNumber, index) => {
return (
<li key={index}><a href=""></a>{pageNumber}</li>
);
});
}
renderPagination() {
const { cardsPerPage } = this.state;
const cards = this.props.cards;
const pageNumbersArray = [];
for (let i = 1; i <= Math.ceil(Object.keys(cards).length / cardsPerPage); i++) {
pageNumbersArray.push(i);
}
return (
<div>
<ul className="pagination">
<li><a href=""><i className="fa fa-angle-double-left"></i></a></li>
{this.renderPageNumbers(pageNumbersArray)}
<li><a href=""><i className="fa fa-angle-double-right"></i></a></li>
</ul>
</div>
);
}
}