key 列表 key

最后更新：2026-10-28

key 是列表渲染时给每个元素的身份标识。React 靠它识别「哪些项变了、哪些项该移动或删除」，用错会导致状态错位、输入框串位等问题。key 必须在同列表内唯一且稳定。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

{items.map((item) => (
  <li key={item.id}>{item.text}</li>  // ✅ 用稳定唯一的 id
))}
// ❌ key={index}：列表会增删排序时容易状态错位

key	元素的稳定唯一标识；React 比对列表时靠它决定复用、移动或销毁哪个元素。

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

列表每行是「任务名 + 输入框」。在几行里输入文字后点「头部插入」，新任务出现在最上方，而已有行的输入内容仍跟随原任务——稳定的 key 让 React 认得每一项。

⚠️ 注意 列表会增删、排序或筛选时不要用 index 作 key，元素的内部状态会跟着位置错位。

💡 提示 优先用后端 id 或业务唯一标识；实在没有稳定 id 的纯静态列表才可以用 index。

ℹ️ 说明 key 不会传进组件内部：子组件里读 props.key 是 undefined，需要的数据请另用普通 prop 传。

更多案例整理中，敬请期待。

Q 为什么不能用数组 index 作为 key？

A index 跟着位置走而不是跟着数据走：插入、删除或排序后，React 会把 A 项的状态误配给 B 项，导致输入框串位、勾选错乱。

Q key 可以重复吗？

A 同一列表内必须唯一，重复会导致渲染异常与警告；不同列表之间互不影响，可以各自从 1 开始。

Q 控制台提示 missing key 怎么解决？

A 说明 map 返回的元素没写 key。给每项加上稳定唯一标识（优先业务 id），并确认加在列表项最外层元素上。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。