React分页切换时如何保持复选框选中状态并维护选中ID

问题场景 #

在React分页场景中，第1页全选复选框后切换到第2页再次全选，当切回第1页或重新进入第2页时，之前选中的复选框会被清空，无法保留选中状态。

需求目标 #

• 将选中的复选框ID持久化存储到state中
• 切换页面时，自动根据保存的ID勾选对应页面的复选框
• 取消勾选时从state中移除对应ID

核心问题分析 #

现有代码已实现部分状态更新逻辑，但未在渲染每页数据时，根据保存的选中ID数组设置复选框的checked属性，导致页面切换后无法恢复选中状态。同时建议用单独的ID数组存储选中状态，比存储整对象更轻量高效。

完整实现代码 #

import { useState, useEffect } from 'react';

function PaginationCheckbox() {
  // 存储所有选中的复选框ID
  const [selectedIds, setSelectedIds] = useState([]);
  // 当前页码
  const [currentPage, setCurrentPage] = useState(1);
  // 当前页的数据
  const [pageData, setPageData] = useState([]);

  // 模拟切换页码时加载对应页面的数据（实际项目替换为接口请求）
  useEffect(() => {
    const mockPageData = Array.from({ length: 5 }, (_, index) => ({
      id: `item-${(currentPage - 1) * 5 + index + 1}`,
      name: `条目${(currentPage - 1) * 5 + index + 1}`
    }));
    setPageData(mockPageData);
  }, [currentPage]);

  // 单个复选框的勾选/取消逻辑
  const handleSingleCheck = (itemId) => {
    setSelectedIds(prevState => {
      if (prevState.includes(itemId)) {
        // 取消勾选：移除对应ID
        return prevState.filter(id => id !== itemId);
      } else {
        // 勾选：添加对应ID
        return [...prevState, itemId];
      }
    });
  };

  // 当前页全选/取消全选逻辑
  const handlePageSelectAll = () => {
    const currentPageItemIds = pageData.map(item => item.id);
    setSelectedIds(prevState => {
      // 判断当前页是否已全选
      const isAllSelected = currentPageItemIds.every(id => prevState.includes(id));
      if (isAllSelected) {
        // 取消全选：移除当前页所有ID
        return prevState.filter(id => !currentPageItemIds.includes(id));
      } else {
        // 全选：合并已有选中ID和当前页ID，去重
        return [...new Set([...prevState, ...currentPageItemIds])];
      }
    });
  };

  return (
    <div className="pagination-container">
      {/* 分页控制 */}
      <div className="page-controls">
        <button onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}>上一页</button>
        <span>当前页：{currentPage}</span>
        <button onClick={() => setCurrentPage(prev => prev + 1)}>下一页</button>
      </div>

      {/* 全选按钮 */}
      <div className="select-all">
        <input
          type="checkbox"
          checked={pageData.every(item => selectedIds.includes(item.id))}
          onChange={handlePageSelectAll}
        />
        <span>全选当前页</span>
      </div>

      {/* 数据列表 */}
      <ul className="item-list">
        {pageData.map(item => (
          <li key={item.id} className="item">
            <input
              type="checkbox"
              id={item.id}
              checked={selectedIds.includes(item.id)}
              onChange={() => handleSingleCheck(item.id)}
            />
            <label htmlFor={item.id}>{item.name}</label>
          </li>
        ))}
      </ul>

      {/* 选中状态展示（可选） */}
      <div className="selected-info">
        已选中ID：{selectedIds.length > 0 ? selectedIds.join(', ') : '无'}
      </div>
    </div>
  );
}

export default PaginationCheckbox;

关键实现要点 #

1. 状态设计：用selectedIds数组单独存储选中的ID，避免存储整对象带来的冗余，同时简化选中状态的判断逻辑。
2. 渲染逻辑：每个复选框的checked属性直接通过selectedIds.includes(item.id)判断，页面切换重新渲染时自动恢复选中状态。
3. 全选逻辑：通过every方法判断当前页所有ID是否都在选中数组中，以此控制全选框的状态，同时处理批量添加/移除当前页ID的逻辑。
4. 状态更新：所有状态更新都使用函数式更新（setSelectedIds(prev => ...)），确保基于最新的前序状态修改，避免状态不一致问题。

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