map函数第一个参数可传什么作为占位符？key为[object Object]重复警告如何解决

问题原因 #

Array.prototype.map 回调函数的入参顺序固定为：第一个参数是当前遍历到的数组元素，第二个参数才是对应索引。你当前的代码把第一个元素参数命名为i并标记为number类型，但实际它是listArray中的对象元素，直接作为key传入时会被转为字符串[object Object]，自然会出现重复key警告。

第一个参数占位符写法 #

如果不需要使用当前遍历的元素，可以用下划线_作为第一个参数的占位符，这是业界通用的无意义参数约定写法。

key重复问题解决 #

方案1：使用索引作为key（仅适用于静态无排序、增删的列表） #

调整参数顺序，取map的第二个参数作为索引赋值给key，示例代码如下：

{listArray.map((_: ListItemType, i: number) => (
    <IRServiceAlertRulesListItem addListItem={addListItem} listArray={listArray} key={i} />
  ))}

注意把ListItemType替换为你listArray数组中元素的实际类型。

方案2：使用业务唯一标识作为key（推荐） #

如果你的列表存在排序、增删操作，用索引作为key可能导致组件状态错乱，优先取每个元素自带的唯一属性（比如id、uuid等业务唯一字段）作为key，示例代码如下：

{listArray.map((item: ListItemType) => (
    <IRServiceAlertRulesListItem addListItem={addListItem} listArray={listArray} key={item.id} />
  ))}

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