如何为 React 列表中的每个子元素正确设置唯一 key 属性

苏承栈

2026-09-25 • 👁 0人浏览过

React 要求使用 map 渲染列表时，必须在直接返回的 JSX 元素上显式设置唯一的 key 属性；该 key 不能放在子组件内部（如 Card 组件的 div 上），否则无法满足 reconciliation 机制要求。 react 要求使用 map 渲染列表时，必须在直接返回的 jsx 元素上显式设置唯一的 `key` 属性；该 key 不能放在子组件内部（如 card 组件的 div 上），否则无法满足 reconciliation 机制要求。在 React 中，key 是一个特殊的、仅用于帮助 React 识别哪些元素发生了变化、被添加或被移除的字符串属性。它必须出现在由 map() 直接返回的 JSX 元素上，而不是在子组件内部的某个 DOM 节点上 —— 这是许多初学者容易误解的关键点。你当前的代码中，key={pops.id} 被错误地写在了 Card 组件内部的

上。这完全无效：React 在 diff 阶段根本不会读取子组件内部的 key，它只检查 map 回调函数直接返回的 JSX 元素（即）是否携带 key。 ✅ 正确做法是：将 key 提升到 map 的返回项层级： React Native For Android 源码编译中文WORD版本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看下载

function App() {
  return (
    
      {data.map((character, index) => (
        
      ))}
    
  );
}

⚠️ 注意事项： key 值必须在兄弟节点中唯一且稳定（避免使用 Math.random() 或易变值）；若 _id 不能保证全局唯一（例如测试数据重复、后端未严格校验），可退而求其次使用 key={character._id ||item-${index}} 或更稳妥的 key={${character._id}-${index}}；不要将 key 传递给自定义组件作为 props（如 key={...} 本身不进入 props 对象），因此 Card 组件内部无需、也不应依赖 props.key；同时，请修正 Card 组件中的一个小错误：abt.substring(...) 应为 pops.about.substring(...)，否则会报 ReferenceError。最后，确保 Card 组件内部不再声明 key（删除

中的 key 属性），保持语义清晰、符合 React 约定。正确设置 key 不仅消除警告，更能提升列表更新性能与状态一致性。

相关文章