使用 array.map 渲染 <li></> 不起作用：地图中的返回语句返回未定义 [重复]

Question

我正在一个 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>
      );
    }
  }

Answer 1

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

renderPageNumbers(pageNumbersArray) {

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