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 提升到 map 的返回项层级：
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
function App() {
return (
<strictmode>
{data.map((character, index) => (
<card key="{character._id}" card id="{character._id}" name="{character.name}" about="{character.about}" img="{character.img}"></card>
))}
</strictmode>
);
}
⚠️ 注意事项：
- 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 不仅消除警告，更能提升列表更新性能与状态一致性。
