React表格状态更新后渲染异常：删除指定项却消失最后一项

问题描述 #

React项目中表格元素添加功能正常，状态变更时表格可同步更新，但删除criteria元素时出现异常：状态显示已正确删除目标项，表格重新渲染时却总是最后一项消失，目标项仍保留显示。例如：存在行1、2、3，删除行2后状态应为行1、3，但页面实际显示行1、2。

代码问题分析 #

1. 删除函数的逻辑错误 #

查看onDelCriterion函数存在两处关键错误：

function onDelCriterion(indexGroup, indexCriterion, event){
    setGroups( groups => {
      return groups.map((group, indexGroup) => { // 此处参数名indexGroup覆盖了函数入参的indexGroup
        if (indexGroup == indexCriterion){ // 条件判断逻辑完全错误
          let newArray = group.criteria.slice()          
          newArray.splice(ind, 1); // ind为未定义变量，应为indexCriterion
          return {...group, criteria : newArray }        
        }
        else {
          return group;
        }
      })
    });
  }

• 变量名冲突：map回调的参数名indexGroup和函数入参的indexGroup重名，导致判断条件indexGroup == indexCriterion逻辑混乱，无法定位到正确的目标组。
• 未定义变量：splice(ind, 1)中的ind未定义，正确应使用传入的indexCriterion来指定要删除的criteria索引。

2. 列表渲染缺少唯一key属性 #

渲染组和criteria的<tr>未添加key属性，React无法准确识别每个列表项的身份，更新时会出现渲染错位，表现为删除项不消失、最后一项被误删。

修复方案 #

修正删除函数逻辑 #

解决变量名冲突和未定义变量问题：

function onDelCriterion(targetGroupIndex, targetCriterionIndex, event){
    setGroups(prevGroups => {
      return prevGroups.map((group, currentGroupIndex) => {
        // 定位到目标组
        if (currentGroupIndex === targetGroupIndex){
          // 复制criteria数组并删除指定索引项
          const newCriteria = [...group.criteria];
          newCriteria.splice(targetCriterionIndex, 1);
          return {...group, criteria: newCriteria };
        }
        return group;
      })
    });
  }

为列表项添加唯一key #

在渲染组和criteria的<tr>上添加key属性：

// 组的行
<tr key={indexGp}> {/* 优先使用group的唯一id作为key，若无则用索引 */}
  ...
  // criteria的行
  <tr key={index}> {/* 优先使用criterion的唯一id作为key */}
    ...
  </tr>
</tr>

额外建议 #

• 尽量使用数据中的唯一标识（如每个group或criterion的id字段）作为key，而非数组索引，避免列表项顺序变化时出现渲染问题。
• 修改状态时始终使用函数式更新（setGroups(prevGroups => ...)），确保获取最新的状态值，避免闭包导致的状态不一致。

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