JSX中map遍历嵌套数组时如何生成符合要求的唯一key值？

方案1：给内层数组绑定唯一ID（最优选择） #

如果可以调整上游arrays的生成逻辑，优先给每个内层数组挂载独立唯一标识：

• 调整数组结构为 [{ id: '唯一值1', values: [] }, { id: '唯一值2', values: [] }, ...]，后端返回的话直接让接口加ID字段，上层组件生成的话可以用crypto.randomUUID()或者自增ID生成器赋值
• 遍历时代码直接写：
  {arrays.map(item => <div key={item.id}><InnerComponent values={item.values} /></div>)}
• 如果不能修改上游数据源结构，可以用useMemo在当前组件包装一层：

const wrappedArrays = useMemo(() => {
  return arrays.map(innerArr => ({
    id: crypto.randomUUID(),
    values: innerArr
  }))
}, [arrays])

只有arrays整体引用变化时才会重新生成ID，数组增删项时原有项的ID保持稳定。

方案2：WeakMap缓存ID（无侵入高性能选择） #

如果不想修改原数组结构，可以利用内层数组是引用类型的特性，用WeakMap做ID映射，不会造成内存泄漏：

// 用useRef持久化WeakMap实例，避免组件重渲染重置映射
const arrayIdMap = useRef(new WeakMap())

const getArrayKey = (innerArr) => {
  if (!arrayIdMap.current.has(innerArr)) {
    arrayIdMap.current.set(innerArr, crypto.randomUUID())
  }
  return arrayIdMap.current.get(innerArr)
}

遍历时代码直接写：
{arrays.map(values => <div key={getArrayKey(values)}><InnerComponent values={values} /></div>)}
只要内层数组的引用不变，对应的key就不会变，性能开销远低于JSON.stringify。

方案3：提取内层数组唯一特征组合 #

如果每个内层数组存储的对象都有固定唯一字段（比如每条数据的id），可以拼接所有对象的唯一字段作为key：
{arrays.map(values => <div key={values.map(item => item.id).join('-')}><InnerComponent values={values} /></div>)}
该方案不需要额外维护ID映射，性能也远高于全量序列化数组内容，适合数据结构固定的场景。

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