React.js切换分页时表格行数无限增加问题求助

核心问题分析 #

你遇到的表格行数无限增加的问题，根源在于三个关键错误：

1. TD元素缺少唯一Key #

React依赖key属性识别DOM元素的唯一性，你的<td>元素没有设置key，当数据更新或分页切换时，React无法正确判断哪些元素需要更新、哪些需要移除，导致旧的TD元素没有被清理，出现叠加渲染。

2. TR元素的Key存在重复风险 #

你使用element[0]作为<tr>的key，如果新获取的数据中存在与旧数据相同的第一个元素值，会触发React的key冲突。React会错误地复用旧组件，导致行内容重复或累加。

3. 状态更新逻辑违规 #

在setDoubts的更新回调中调用setNPages，违反了React setState更新函数的纯函数要求——更新函数内不应触发其他状态更新，这会导致状态更新顺序混乱，间接影响分页计算的准确性。

修复步骤 #

1. 为TD元素添加唯一Key #

修改Records组件中TD的渲染代码，为每个TD分配唯一标识（优先使用数据本身的唯一值，无唯一值时用索引）：

{ 
  element.map((subElement, subIndex) => 
    <td key={subIndex}>{subElement}</td>
  )
}

2. 确保TR元素的Key全局唯一 #

如果接口返回的数据有唯一ID字段，优先用ID作为TR的key：

// 父组件中修改数据映射逻辑，将ID放在数组第一位
const newData = [...response.data.map((element)=>{
  return [element.id, element.a, element.b, element.c, element.d, element.e, element.f, element.g];
}), ...oldDoubts];

// Records组件中使用ID作为key
<tr className="table-row" key={element[0]} onClick={()=>onRowClick(element)}>

如果没有ID字段，可以临时使用index + element[0]组合作为key（仅临时方案，建议后端补充唯一标识）。

3. 修正nPages的更新逻辑 #

将setNPages从setDoubts的回调中移出，通过监听doubts的变化来更新分页总数：

// 父组件新增useEffect监听doubts变化
useEffect(() => {
  setNPages(Math.ceil(doubts.length / recordsPerPage));
}, [doubts, recordsPerPage]);

// 原useEffect中的setDoubts回调简化
setDoubts((oldDoubts)=>{
  const newData = [...response.data.map((element)=>{
    return [element.a, element.b, element.c, element.d, element.e,
            element.f, element.g];
  }), ...oldDoubts];
  return newData;
});

4. 验证分页参数的合法性 #

确认currentPage的初始值为1，且分页切换时currentPage的取值范围始终在1到nPages之间，避免slice函数出现异常索引。

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