React中更新currentPaginationData后DOM未刷新的问题求助

核心问题 #

你用let currentPaginationData声明的是普通JavaScript变量，React不会追踪这类变量的变化，自然不会触发组件重渲染——这就是为什么控制台能看到变量更新，但DOM毫无反应的原因。React组件的渲染完全由**状态（State）或属性（Props）**的变化驱动，只有当这两者改变时，组件才会重新计算并更新DOM。

修复步骤 #

1. 引入React状态管理钩子 #

首先导入useState，用来管理分页相关的状态：

import React, { useState } from "react";

2. 用状态替代普通变量 #

将当前页码、每页条数改为React状态，替代原来的普通变量：

function BlogList() {
  // 初始化状态：当前页码为1，每页15条
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(15);

  // 动态计算当前页要展示的数据（无需单独存为状态）
  const currentPaginationData = blogs.posts.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );
  // ...
}

3. 更新状态修改函数 #

调整updateRowsPerPage和updatePage，让它们通过状态更新函数触发组件重渲染：

const updateRowsPerPage = (numPerPage) => {
  setPageSize(numPerPage);
  setCurrentPage(1); // 切换每页条数时重置到第一页，避免数据越界
};

const updatePage = (newPage) => {
  setCurrentPage(newPage);
};

4. 同步Pagination组件的属性 #

将Pagination组件的props改为使用状态值，确保组件间状态同步：

<Pagination
  currentPage={currentPage}
  totalCount={blogs.posts.length}
  pageSize={pageSize}
  pageSizeOptions={PAGE_SIZES}
  onPageChange={updatePage}
  onPageSizeOptionChange={updateRowsPerPage}
/>

完整修改后的代码 #

import BlogPost from "./BlogPost";
import Pagination from "./Pagination";
import React, { useState } from "react";
import blogs from "../data/blogs.json";

const PAGE_SIZES = [15, 25, 50, 100];

function BlogList() {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(15);

  const currentPaginationData = blogs.posts.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  const updateRowsPerPage = (numPerPage) => {
    setPageSize(numPerPage);
    setCurrentPage(1);
  };
  
  const updatePage = (newPage) => {
    setCurrentPage(newPage);
  };

  return (
    <div>
      <Pagination
        currentPage={currentPage}
        totalCount={blogs.posts.length}
        pageSize={pageSize}
        pageSizeOptions={PAGE_SIZES}
        onPageChange={updatePage}
        onPageSizeOptionChange={updateRowsPerPage}
      />
      <ul
        aria-label="blog list"
      >
        {currentPaginationData.map((blog) => (
          <BlogPost
            key={blog.id}
            author={blog.author}
            title={blog.title}
            excerpt={blog.excerpt}
            featureImage={blog.image}
          />
        ))}
      </ul>
    </div>
  );
}

export default BlogList;

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