如何修复React中重复使用组件导致的Key重复问题？

问题根源 #

重复渲染<Module/>组件时，每个组件内部都用数组索引idx作为map元素的key，当多个组件的advantages数组长度一致时，会出现重复的key值（比如两个组件的列表项key都是0、1、2），触发React的重复key警告。

解决方法 #

1. 给每个Module实例传递唯一前缀拼接key

在父组件中给每个<Module/>分配唯一前缀，子组件将前缀与索引拼接作为key，确保全局唯一：

App.tsx

<>
    <Module prefix="product-advantages" />
    <Module prefix="service-advantages" />
</>

Module.tsx

{props.advantages.map((i, idx) =>
    <div key={`${props.prefix}-${idx}`}>
        {i}
    </div>
)}

2. 使用数据本身的唯一标识作为key（推荐）

如果advantages数组中的元素包含唯一标识（如后端返回的id、uuid），直接用这个标识作为key，这是React官方推荐的最佳实践：

假设advantages结构为：

type Advantage = {
    id: number;
    text: string;
};

Module.tsx

{props.advantages.map((item) =>
    <div key={item.id}>
        {item.text}
    </div>
)}

3. 传递全局唯一标识符给Module

可以通过生成UUID等全局唯一值，传递给每个Module实例，再与索引拼接：

App.tsx

// 可以用uuid库生成，或自己实现简单的唯一值生成
const getUniqueId = () => `module-${Date.now()}-${Math.random().toString(16).slice(2)}`;

<>
    <Module uniqueId={getUniqueId()} />
    <Module uniqueId={getUniqueId()} />
</>

Module.tsx

{props.advantages.map((i, idx) =>
    <div key={`${props.uniqueId}-${idx}`}>
        {i}
    </div>
)}

注意事项 #

• 避免单纯使用数组索引作为key：当数组元素增删、顺序调整时，索引会变化，React可能错误复用组件，引发状态异常或性能问题。
• 确保key的全局唯一性：同一个React树中，所有列表项的key必须唯一，不能跨组件重复。

内容的提问来源于stack exchange，提问作者middleStackoverflower