React组件实现JSON返回数据的分页功能（每页6条）

没问题，我来帮你给这个React类组件加上分页功能，每页展示6条数据。咱们一步步来修改代码，我会解释每个部分的作用：

1. 扩展组件状态 #

首先，我们需要在state里添加几个分页相关的变量，用来跟踪当前页码、每页条数：

constructor(props) {
  super(props)
  this.state = {
    houses: [],
    currentPage: 1, // 当前页码，默认从第1页开始
    itemsPerPage: 6 // 每页固定展示6条数据
  }
}

2. 编写当前页数据截取方法 #

接下来写一个方法，用来从完整的房屋数据里截取当前页需要展示的内容：

getCurrentPageHouses = () => {
  const { houses, currentPage, itemsPerPage } = this.state;
  // 计算当前页数据的起始索引
  const startIndex = (currentPage - 1) * itemsPerPage;
  // 截取对应区间的数据返回
  return houses.slice(startIndex, startIndex + itemsPerPage);
}

3. 实现页码切换逻辑 #

添加处理页码变化的方法，包括上一页、下一页，以及直接跳转到指定页码的功能：

// 跳转到指定页码
handlePageChange = (pageNumber) => {
  this.setState({ currentPage: pageNumber });
}

// 切换到上一页
handlePrevPage = () => {
  if (this.state.currentPage > 1) {
    this.setState(prevState => ({ currentPage: prevState.currentPage - 1 }));
  }
}

// 切换到下一页
handleNextPage = () => {
  const totalPages = Math.ceil(this.state.houses.length / this.state.itemsPerPage);
  if (this.state.currentPage < totalPages) {
    this.setState(prevState => ({ currentPage: prevState.currentPage + 1 }));
  }
}

4. 修改渲染逻辑 #

把原来渲染全部数据的逻辑改成渲染当前页数据，再加上分页控制按钮：

render() {
  const currentHouses = this.getCurrentPageHouses();
  const totalPages = Math.ceil(this.state.houses.length / this.state.itemsPerPage);
  const { currentPage } = this.state;

  return (
    <div className="houses-container">
      {/* 渲染当前页的房屋列表 */}
      <div className="houses-list">
        {currentHouses.length > 0 ? (
          currentHouses.map(house => (
            // 这里替换成你原来渲染单个房屋的代码，示例如下：
            <div key={house.id} className="house-card">
              <h3>{house.name}</h3>
              <p>地址：{house.address}</p>
              <p>价格：{house.price}</p>
              {/* 根据你的数据结构补充其他字段 */}
            </div>
          ))
        ) : (
          <p>暂无房屋数据</p>
        )}
      </div>

      {/* 分页控制栏（只有总页数大于1时才显示） */}
      {totalPages > 1 && (
        <div className="pagination">
          {/* 上一页按钮 */}
          <button onClick={this.handlePrevPage} disabled={currentPage === 1}>
            上一页
          </button>

          {/* 页码数字按钮 */}
          {Array.from({ length: totalPages }, (_, index) => index + 1).map(page => (
            <button
              key={page}
              onClick={() => this.handlePageChange(page)}
              style={{
                backgroundColor: currentPage === page ? '#007bff' : 'transparent',
                color: currentPage === page ? 'white' : '#007bff',
                margin: '0 4px',
                padding: '4px 12px',
                border: '1px solid #007bff',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              {page}
            </button>
          ))}

          {/* 下一页按钮 */}
          <button onClick={this.handleNextPage} disabled={currentPage === totalPages}>
            下一页
          </button>
        </div>
      )}
    </div>
  );
}

完整修改后的组件代码 #

把所有部分整合起来，完整代码如下：

import React, { Component } from 'react'
import axios from 'axios'
const URL_HOUSES = 'http://localhost:3001/houses';

class Houses extends Component {
  constructor(props) {
    super(props)
    this.state = {
      houses: [],
      currentPage: 1,
      itemsPerPage: 6
    }
  }

  componentDidMount() {
    axios.get(URL_HOUSES)
      .then(res => { this.setState({ houses: res.data }) })
      .catch(err => console.error('获取房屋数据失败:', err)) // 新增错误处理，让组件更健壮
  }

  getCurrentPageHouses = () => {
    const { houses, currentPage, itemsPerPage } = this.state;
    const startIndex = (currentPage - 1) * itemsPerPage;
    return houses.slice(startIndex, startIndex + itemsPerPage);
  }

  handlePageChange = (pageNumber) => {
    this.setState({ currentPage: pageNumber });
  }

  handlePrevPage = () => {
    if (this.state.currentPage > 1) {
      this.setState(prevState => ({ currentPage: prevState.currentPage - 1 }));
    }
  }

  handleNextPage = () => {
    const totalPages = Math.ceil(this.state.houses.length / this.state.itemsPerPage);
    if (this.state.currentPage < totalPages) {
      this.setState(prevState => ({ currentPage: prevState.currentPage + 1 }));
    }
  }

  render() {
    const currentHouses = this.getCurrentPageHouses();
    const totalPages = Math.ceil(this.state.houses.length / this.state.itemsPerPage);
    const { currentPage } = this.state;

    return (
      <div className="houses-container">
        <div className="houses-list">
          {currentHouses.length > 0 ? (
            currentHouses.map(house => (
              <div key={house.id} className="house-card">
                <h3>{house.name}</h3>
                <p>地址：{house.address}</p>
                <p>价格：{house.price}</p>
                {/* 补充你的其他房屋信息渲染逻辑 */}
              </div>
            ))
          ) : (
            <p>暂无房屋数据</p>
          )}
        </div>

        {totalPages > 1 && (
          <div className="pagination">
            <button onClick={this.handlePrevPage} disabled={currentPage === 1}>
              上一页
            </button>

            {Array.from({ length: totalPages }, (_, index) => index + 1).map(page => (
              <button
                key={page}
                onClick={() => this.handlePageChange(page)}
                style={{
                  backgroundColor: currentPage === page ? '#007bff' : 'transparent',
                  color: currentPage === page ? 'white' : '#007bff',
                  margin: '0 4px',
                  padding: '4px 12px',
                  border: '1px solid #007bff',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                {page}
              </button>
            ))}

            <button onClick={this.handleNextPage} disabled={currentPage === totalPages}>
              下一页
            </button>
          </div>
        )}
      </div>
    );
  }
}

export default Houses;

额外说明 #

• 我给分页按钮加了基础的内联样式，你可以根据项目的样式规范改成对应的className来美化。
• 如果你的后端支持分页接口（比如通过page和limit参数返回对应页的数据），可以把前端分页改成后端分页——只需要在componentDidMount和页码变化时，带着分页参数去请求接口即可，这种方式更适合大数据量场景。

内容的提问来源于stack exchange，提问作者claudiopb