在多个.map()中用index作key是否影响React响应性？需全局唯一key吗？

.map()回调里的index只在当前遍历的数组范围内唯一，并非全局唯一。你代码里books和movies两个map分别生成的元素，会出现key重复的情况（比如第一个book和第一个movie的key都是0），而React要求同一父容器下的所有子元素key必须唯一，这种重复会导致渲染异常，还可能影响列表更新时的性能。

所以必须把key设置成全局唯一的，你说的给index加前缀（'book-' + index和'movie-' + index）是可行的方案，能避免不同列表的元素key冲突。

如果你的books和movies数据本身带有唯一标识（比如id字段），更推荐直接用这个唯一标识当key——因为index会随着列表元素的增删发生变化，可能触发不必要的组件重渲染，而数据自带的唯一id更稳定。

修改后的示例代码 #

方案一：给index加前缀

<div>
    { books.map( ( book, index ) => (
        <div key={ `book-${index}` }>
            { book.label }
        </div>
    ) ) }
    { movies.map( ( movie, index ) => (
        <div key={ `movie-${index}` }>
            { movie.label }
        </div>
    ) ) }
</div>

方案二：使用数据自带的唯一标识（推荐）

<div>
    { books.map( book => (
        <div key={ book.id }>
            { book.label }
        </div>
    ) ) }
    { movies.map( movie => (
        <div key={ movie.id }>
            { movie.label }
        </div>
    ) ) }
</div>

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