React嵌套子元素存在重复key却无警告，原因是什么？

你写了这段React代码，运行时没出现预期的重复key警告，但明明看起来有很多相同的key：

const a = [1, 2, 3, 4];
const b = [1, 2, 3, 4];

export const Test = () => {
  return (
    <div>
      {a.map((num, index) =>
        b.map((sec, secindex) => <Button key={secindex}>hi</Button>)
      )}
    </div>
  );
};

原因解析 #

React的key只要求在「同一个map生成的同级兄弟元素集合内」唯一，不需要全局唯一。

你的代码里，a.map会循环4次，每次循环里调用b.map生成一组包含4个Button的数组。也就是说，这16个Button其实被分成了4组，每组内部的key（0-3）是唯一的——每个组对应一次b.map的调用，React会把每个组的元素当成独立的集合来处理，不会跨组检查key是否重复。

哪怕最终这些Button在DOM里是同级的，React在协调（reconciliation）过程中，是按map调用的批次来追踪元素的，只要每个批次内部的key不重复，就不会触发警告。

如果把两个map合并成一个（比如先把a和b合并成一维数组，再用一次map），这时若使用重复的key，React才会抛出警告。

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