React key 使用数组索引时哪些更新会错位

React 的 key 不是“这一行现在排第几”的编号，而是列表项在兄弟节点中的身份。把数组索引写成 key，在静态列表里可能一直看不出问题；一旦头部插入、删除中间项或重新排序，React 就可能把原组件的状态复用到另一条数据上，典型表现是输入框内容、勾选状态或展开状态错位。

官方地址：https://react.dev/

key 负责标记数据身份，不是记录当前下标

React 每次重新渲染列表时，需要判断“这个子节点还是原来的哪一项”。稳定的 key 给出的是数据身份；数组位置只描述本次渲染的排列。比如 A、B、C 变成 X、A、B、C，A 的位置从 0 变成 1，但它仍然是 A。使用 key={item.id} 时，React 有机会沿用 A 对应组件的状态。

官方文档还特别提醒：key 应该来自数据，不能在渲染过程中用 Math.random() 重新生成；它只在当前父节点的兄弟范围内要求唯一，也不会自动出现在子组件的 props 中。

插入、删除和排序为什么会放大索引 key 的问题

问题不在索引这个数字本身，而在它会随着数组变化重新指向别的实体。下面这个例子让每行拥有自己的输入状态：

function TaskList({ tasks }) {
  return tasks.map((task, index) => (
    // 这里的 index 只代表当前排列，不能代表任务身份
    
  ));
}

function TaskRow({ task }) {
  const [note, setNote] = useState('');
  // note 属于当前组件实例；key 错位时它就可能跟错任务
  return  setNote(event.target.value)} placeholder={task.name} />;
}

假设用户在 B 行输入了备注，然后在数组头部插入 X。索引 key 会让原来 key 为 0、1、2 的位置继续被复用，于是输入状态可能跟着位置走，而不是跟着 B 走。删除中间项和排序也有同类风险；如果行组件没有内部状态，视觉上可能暂时正常，但仍不代表身份表达正确。

动态列表直接改成稳定 ID

修复通常只需要把 key 换成数据中稳定且同级唯一的字段，并确保增删排序不会修改它：

function TaskList({ tasks }) {
  return tasks.map(task => (
    // id 应在创建任务时确定，排序和过滤都不改变它
    
  ));
}

如果后端没有 ID，可以在创建数据项时生成一次，而不是在 JSX 渲染时生成。临时数组若只用于一次性静态展示，索引 key 的风险较小；但只要未来可能支持拖拽排序、分页合并、插入置顶、删除或行内编辑，就应从数据模型开始保留稳定标识。

用更新矩阵判断是否该换 key

最后检查三件事：ID 是否在同一父节点下唯一；ID 是否跨渲染保持不变；组件是否把输入、勾选、展开等状态放在行内部。若第三项为“是”，就不要用数组索引掩盖身份问题。

相关问题

key 会自动传给子组件吗？

不会。它是 React 用来匹配节点的特殊属性；组件若需要 ID，应额外传入 taskId={task.id}。

key={Math.random()} 能避免重复吗？

不能。每次渲染都会变，React 会把节点当成新组件重建，既损失状态，也增加不必要的工作。

数组索引 key 什么时候风险较低？

只有在列表不会排序、插入、删除，且子项不保存会被用户感知的状态时，风险才相对较低。

key 需要全局唯一吗？

不需要。它只需在同一个父节点的兄弟列表中稳定且唯一。