在 <li>array.map 的情况下渲染 </> 不起作用：map 中的返回语句返回未定义

Question

我正在一个反应项目中实现分页，并且在 ul 中返回一组 li 元素时遇到问题。在控制台中，renderPageNumbers 返回 undefined，而我能够看到传递的数组并注销每个元素映射迭代器。箭头 li 显示在页面上，但应该介于两者之间的箭头 li 不会。

我相信我在地图语句中正确返回，所以我不知道我需要做什么才能完成这项工作。

渲染分页在组件的渲染方法中调用。

这是我的简化代码：

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

Answer 1

您使用了 map，map是一个数组方法，用于将数组上的每个元素转换为其他元素并返回一个新数组，因此您需要从renderPageNumbers函数返回该新数组。

renderPageNumbers(pageNumbersArray) {
return pageNumbersArray.map((pageNumber, index) => {
return (
<li key={index}><a href=""></a>{pageNumber}</li>
);
});
}