javascript - 使用 array.map 渲染 <li>/> 不工作 : Return statement in map returning undefined

标签 javascript reactjs pagination

<分区>

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

最佳答案

你用过map,map是一个数组方法,将数组上的每个元素转换成其他的东西并返回一个新数组,因此你需要返回那个新的来自 renderPageNumbers 函数的数组。

renderPageNumbers(pageNumbersArray) {

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

关于javascript - 使用 array.map 渲染 <li>/> 不工作 : Return statement in map returning undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50342034/

相关文章:

javascript - 这是使用 nodejs 的好场景吗?

javascript - 我如何在从表单获取用户输入的对象数组内部设置状态

django-rest-framework - 如何基于序列化器获取分页响应模式(drf-yasg)

codeigniter - 如何在没有配置的情况下设置分页链接的样式 - codeigniter

javascript - 如何在第一个 img 标签之前和第二个 img 标签之后添加 html 代码

javascript - 如何从我的 javascript Web 应用程序调用 google 云函数

javascript - 从列表选项生成文本字段

reactjs - 如何验证Yup的开始日期是否晚于结束日期?

reactjs - 为什么 yarn create react-app 命令不起作用

ruby-on-rails - 在 Postgres 中使用子查询进行 Rails 分页查询