React重复组件唯一Key问题：perkProgress场景下的困惑

嘿，我完全懂你碰到的这个坑！Ramda的repeat函数有个容易忽略的点：它会先把你传入的第一个参数完整求值一次，然后把这个结果重复指定的次数。这就导致你原来的写法里，uid()只在调用repeat的时候执行了一次，生成的所有<CheckCircle />元素都带着同一个key，React自然会抛出重复key的警告。

给你两种实用的解决方案：

方案一：用range生成索引（最简洁） #

放弃repeat，改用range生成一组唯一的索引，再通过map渲染元素。索引本身就是天然的唯一key，连uid()都省了：

import { range } from 'ramda';

// 渲染perkProgress个CheckCircle
range(0, perkProgress).map(index => (
  <CheckCircle key={index} />
))

比如当perkProgress=3时，range(0,3)会生成[0,1,2]，map后每个元素的key分别是0、1、2，完全不会重复。

方案二：让repeat配合函数延迟求值（保留repeat的用法） #

如果你一定要用repeat，可以让它重复一个“占位符”（比如null），然后用map遍历的时候再动态生成元素和key——这样每次uid()都会被重新调用：

import { repeat, map } from 'ramda';

map(() => <CheckCircle key={uid()} />, repeat(null, perkProgress))

这里repeat(null, perkProgress)生成的是perkProgress个null，map的时候每遍历一个null就执行一次箭头函数，每次都会调用uid()生成新的唯一key，完美解决重复问题。

总结一下：核心问题就是repeat会提前求值第一个参数，所以要避免把已经生成好key的元素传给它，要么用索引当key，要么延迟元素的生成时机。

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