如何从React状态数组中移除指定索引行且不遗留空值

架构老林

2026-8-23

动态表单指定索引行删除解决方案

问题分析

你需要删除动态表单中指定索引的行，同时保证数组state中无null/空值，但现有代码存在两个核心问题：

第一段filter代码仅删除最后一行：大概率是渲染列表时用了数组index作为key，导致组件复用后传递的索引错误，而非filter逻辑本身问题。
第二段对象delete代码：操作的是对象而非数组，delete后会留下不连续的键或undefined值，导致后续新增行时索引错位，出现空值异常。

正确实现方式

由于行数据存储在数组state中，应使用数组操作来实现正确删除，同时过滤空行：

方案1：基于正确索引的删除（需确保索引传递准确）

const removeRow = (targetIndex) => {
  setLocationRows((prevRows) => {
    // 过滤指定索引的行，同时排除空/null的行
    return prevRows.filter((row, idx) => {
      // 排除目标索引
      if (idx === targetIndex) return false;
      // 排除空对象或全为空值的行
      return row != null && Object.values(row).some(val => val !== '' && val != null);
    });
  });
};

方案2：基于唯一ID的删除（推荐，避免索引错位问题）

为每行数据生成唯一ID，删除时通过ID定位，彻底避免索引依赖导致的错误：

// 新增行时生成唯一ID
const addRow = () => {
  setLocationRows(prev => [
    ...prev,
    { id: Date.now(), name: '', address: '' } // 替换为你的行初始数据
  ]);
};

// 根据ID删除行，同时过滤空行
const removeRow = (rowId) => {
  setLocationRows((prevRows) => {
    return prevRows.filter(row => {
      // 排除目标ID的行
      if (row.id === rowId) return false;
      // 排除空/null的行
      return row != null && Object.values(row).some(val => val !== '' && val != null);
    });
  });
};