React表格行删除异常：组件仅能访问数组旧状态的解决方法

核心问题原因 #

你遇到的问题是闭包导致的旧状态捕获：removeRow函数直接使用当前作用域的meals变量，而每个Row组件的deleteFunction在创建时捕获的是当时的meals旧值，并非最新状态。另外如果你的key使用了数组索引，会导致React无法正确识别组件身份，进一步放大批量删除的异常表现。

具体修复步骤 #

1. 改用函数式更新获取最新状态 #

修改removeRow函数，使用React的函数式更新语法，确保每次删除操作都能拿到最新的状态值：

function removeRow(key) {
  // prevMeals是React传入的最新状态
  setMeals(prevMeals => prevMeals.filter(i => i.props.keyProp !== key));
}

2. 确保Row组件的key唯一且稳定 #

绝对不要用数组索引作为key（比如map((item, index) => <Row key={index} ... />)），删除行后索引会变动，React会错误地复用组件。建议使用数据本身的唯一标识（比如每条数据的ID）作为key：

// 假设你的数据包含唯一id字段
mealsData.map(meal => (
  <Row
    className={className}
    columns={columns}
    text={meal.text}
    key={meal.id}
    keyProp={meal.id}
    deleteFunction={() => removeRow(meal.id)}
  />
))

3. 推荐：状态存储原始数据而非组件实例 #

你当前把<Row/>组件实例存在meals状态里，这不是React的最佳实践。建议状态只存原始数据，渲染时通过map生成组件：

// 初始化状态为原始数据数组
const [meals, setMeals] = useState([
  { id: 1, text: '第一行内容' },
  { id: 2, text: '第二行内容' },
  // ...其他行数据
]);

// 渲染表格
return (
  <table>
    {meals.map(meal => (
      <Row
        className={className}
        columns={columns}
        text={meal.text}
        key={meal.id}
        keyProp={meal.id}
        deleteFunction={() => removeRow(meal.id)}
      />
    ))}
  </table>
);

这种方式让状态更易维护，也能从根源避免组件实例存储带来的闭包和状态同步问题。

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