React 列表删除一项后输入框内容错位怎么处理

React 列表删除一项后，如果相邻输入框的文字“串行”了，先检查 map() 里的 key。把数组下标写成 key={index} 时，React 可能把原来第二行的输入组件复用到第一行，输入框自身的状态就看起来错位。修复方式是给每条数据一个稳定的唯一 id，并用这个 id 同时更新、删除和渲染列表。

列表会变化时，不要用 index 代表数据身份；让 key 绑定创建时生成的稳定 id，React 才能在删除、插入或排序后找到同一个列表项。

先用一个可编辑清单复现错位

假设每行有一个输入框和删除按钮。下面的写法短，但它把行的位置当成了身份：

function BadList() {
  const [items, setItems] = useState([
    { id: 'a1', text: '牛奶' },
    { id: 'b2', text: '面包' },
    { id: 'c3', text: '咖啡' },
  ]);

  const remove = (id) => {
    // 只删除目标数据，保留其余对象的身份
    setItems(current => current.filter(item => item.id !== id));
  };

  return items.map((item, index) => (
    
  ));
}

先在“面包”输入框中追加文字，再删除“牛奶”。数据数组确实变成了“面包、咖啡”，但第一行组件仍可能沿用原来第一行的内部状态，于是文字看起来跑到了错误的数据上。问题不在 filter()，而在 React 无法从 index 判断“这个组件还是原来的哪一项”。

用稳定 id 让数据项和输入组件对上

稳定 id 应该在创建数据时产生，渲染时只读取它，不能每次 render 都重新生成。使用数据库主键最直接；本地新增数据可以用递增计数器或 crypto.randomUUID()。

import { useState } from 'react';

const initialItems = [
  { id: 'a1', text: '牛奶' },
  { id: 'b2', text: '面包' },
  { id: 'c3', text: '咖啡' },
];

function ShoppingList() {
  const [items, setItems] = useState(initialItems);

  const updateText = (id, text) => {
    // 通过 id 定位数据，而不是依赖当前行号
    setItems(current => current.map(item =>
      item.id === id ? { ...item, text } : item
    ));
  };

  const remove = (id) => {
    // 删除后其他项目的 id 不变，React 可以保留正确状态
    setItems(current => current.filter(item => item.id !== id));
  };

  return (
    

      {items.map(item => (
        
      ))}
    
  );
}

function Row({ item, onTextChange, onRemove }) {
  return (
    

       onTextChange(item.id, event.target.value)}
      />
       onRemove(item.id)}>删除
    
  );
}

这里的 key 写在 map() 直接返回的 Row 上，且与数据里的 id 一一对应。key 只给 React 使用，Row 不会自动收到名为 key 的 props，所以需要显式传入 item，并通过 item.id 触发更新或删除。

运行时按这张表检查列表身份

改完后不要只看控制台警告。依次在首行和中间行输入不同文字，再删除第一项、在头部插入一项、改变排序；每次都看文字是否跟着原来的数据对象移动。

如果输入框本身是受控组件，最终值应来自 item.text；如果 Row 内部还保存了草稿、焦点或展开状态，稳定 key 同样决定这些状态属于哪一行。只有确实想让组件重置时，才有意改变 key。

几个容易混淆的边界

第一，id 必须在创建项目时生成，而不是写成 items.map(item => ({ ...item, id: crypto.randomUUID() }))，否则每次渲染都会换身份。第二，兄弟节点范围内的 key 要唯一，不要求全应用全局唯一。第三，数据库 id、后端返回的业务编号和前端临时 id 都可以作为 key，但临时 id 在保存成功后要设计好替换策略，避免保存瞬间整行重建。

如果你只是把 key={index} 换成 key={item.id}，但删除回调仍传 index，数据和界面仍可能不一致。让增删改都接收 id，才能把“组件身份”和“业务身份”统一起来。

常见问题

为什么 React 没有报错，输入框还是会错位？

下标 key 通常是合法的字符串或数字，React 不一定报错；它只是不知道删除后哪个位置仍代表原来的哪条数据。

key 能直接在 Row 组件里读取吗？

不能。key 是 React 内部协调使用的特殊属性，需要把 id 作为普通 props 单独传给 Row。

没有数据库 id 时用什么 key？

新增项目时生成一次稳定 id，例如递增序号或 crypto.randomUUID()，并把它存进项目对象；不要在渲染阶段生成。

把列表项看成“有身份的数据对象”，而不是“当前第几行”，删除后的输入框错位通常就能一次解决。真正需要检查的地方是 key、增删改回调和数据对象是否使用了同一套身份字段。