在React.js中结合useEffect获取数据时使用slice()实现分页展示

你的核心需求是只展示currentPosts截取后的分页数据，以下是具体修改方案和优化建议：

1. 核心修改：替换遍历对象 #

当前代码遍历的是全量数据pakketjes，只需把pakketjes.map替换成currentPosts.map，就能只显示当前页指定数量的内容：

// 原代码
{pakketjes.map(pakketje => (...))}

// 修改后
{currentPosts.map(pakketje => (...))}

2. 修正初始页码（避免空列表） #

你设置的currentPage初始值为2，若接口返回的数据不足2页，首次加载会显示空列表。建议把初始页码改为1：

const [currentPage, setCurrentPage] = React.useState(1); // 从第一页开始

3. （可选）添加分页控制按钮 #

如果需要切换页码，可在列表下方添加分页按钮，方便用户翻页：

// 在Paper组件下方添加分页控制区
<div style={{ textAlign: 'center', marginTop: '20px' }}>
  <Button 
    variant="contained" 
    disabled={currentPage === 1} 
    onClick={() => setCurrentPage(currentPage - 1)}
    style={{ marginRight: '10px', backgroundColor: 'Navy', color: 'white' }}
  >
    上一页
  </Button>
  <Button 
    variant="contained" 
    disabled={currentPage * postsPerPage >= pakketjes.length} 
    onClick={() => setCurrentPage(currentPage + 1)}
    style={{ backgroundColor: 'Navy', color: 'white' }}
  >
    下一页
  </Button>
</div>

修改后的完整代码 #

export default function HomePagina() {
  const paperStyle = { padding: '20px 20px', width: 600, margin: "20px auto", backgroundColor: "#F2D2BD", borderRadius: "35px" };
  const [pakketjes, setPakketjes] = React.useState([]);
  const [currentPage, setCurrentPage] = React.useState(1); // 修正初始页码为1
  const [postsPerPage, setpostsPerPage] = React.useState(2)
  const lastPostIndex = currentPage * postsPerPage;
  const firstPostIndex = lastPostIndex - postsPerPage;
  const currentPosts = pakketjes.slice(firstPostIndex, lastPostIndex)

  // 页面加载时获取全量数据
  React.useEffect(() => {
    fetch("http://localhost:8080/pakketje/getAll")
      .then(res => res.json())
      .then((result) => {
        setPakketjes(result);
      })
  }, []);


 return (
    <>
      <Appbar />
      <br />
      <Container>
        <div>
          <img src={AllePakketjes} width="410" height="350" alt="" style={{ marginLeft: "365px" }} />
        </div>
        <h1 style={{ textAlign: "center", color: "white" }}>Alle pakketjes</h1>
        <Paper elevation={3} style={paperStyle}>
          {/* 核心修改：遍历分页后的currentPosts */}
          {currentPosts.map(pakketje => (
            <Paper elevation={6} style={{ margin: "10px", padding: "15px", textAlign: "left", backgroundColor: "white", borderRadius: "25px" }} key={pakketje.id}>
              <b>Pakketje&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;</b>
              <br /><br />
              <b>ID:</b>{pakketje.id}
              <br /><br />
              <b>Status: </b>{pakketje.status}
              <br />
              <b>Code:</b>{pakketje.code}
              <br /><br />
              <Button variant="contained" style={{ backgroundColor: "#AE0000" }} color="secondary" onClick={(e) => deletePakketje(pakketje.id, e)}>
                Delete <DeleteIcon fontSize="small" />
              </Button>&amp;emsp;&amp;emsp;
              <Link to={`/pakketjeUpdaten/${pakketje.id}`}>
                <Button variant="contained" style={{ backgroundColor: "Navy" }} color="secondary">
                  Update <ReplayIcon fontSize="small" />
                </Button>
              </Link>&amp;emsp;&amp;emsp;
              <Button variant="contained" style={{ backgroundColor: "black" }} color="secondary" onClick={(e) => statusOnderweg(pakketje.id, e)}>
                Verzenden&amp;emsp;<LocalShippingIcon fontSize="small" />
              </Button>
              <br />
              <br />
            </Paper>
          ))}  
        </Paper>
        {/* 可选分页控制按钮 */}
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
          <Button 
            variant="contained" 
            disabled={currentPage === 1} 
            onClick={() => setCurrentPage(currentPage - 1)}
            style={{ marginRight: '10px', backgroundColor: 'Navy', color: 'white' }}
          >
            上一页
          </Button>
          <Button 
            variant="contained" 
            disabled={currentPage * postsPerPage >= pakketjes.length} 
            onClick={() => setCurrentPage(currentPage + 1)}
            style={{ backgroundColor: 'Navy', color: 'white' }}
          >
            下一页
          </Button>
        </div>
      </Container>
    </>
  );
}

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