React中如何复用元素数组？（解决唯一key冲突问题）

问题核心：你复用的colourOptions是同一批React元素实例，React不允许同一个元素实例出现在DOM的多个位置，即便key本身唯一，重复使用实例也会触发"相同key"警告。以下是不用随机key的最佳解决方法：

1. 每次渲染时独立生成Option数组（最直接） #

把映射逻辑抽成函数，每个<select>单独调用该函数生成独立的Option实例：

const colours=[ 
  {name:'red',hex:'ff0000',id:'4855r234'}, 
  {name:'green',hex:'00ff00',id:'1324855g'}, 
  {name:'blue',hex:'0000ff',id:'b324899'} 
] 

const getColourOptions = () => colours.map(colour => 
  <option value={colour.hex} key={colour.id}>{colour.name}</option> 
) 

return ( 
  <form>
    <select name='shirt'>{getColourOptions()}</select>
    <select name='hat'>{getColourOptions()}</select> 
  </form> 
)

说明：每次调用getColourOptions()都会生成全新的Option元素数组，每个<select>下的Option都是独立实例，key在各自父容器范围内唯一，完全符合React的key规则。

2. 封装成可复用的Option列表组件（更优雅） #

如果这个Option列表需要在多处复用，直接封装成组件，每次使用组件都会重新渲染内部Option：

const colours=[ 
  {name:'red',hex:'ff0000',id:'4855r234'}, 
  {name:'green',hex:'00ff00',id:'1324855g'}, 
  {name:'blue',hex:'0000ff',id:'b324899'} 
] 

const ColourOptionList = () => (
  colours.map(colour => 
    <option value={colour.hex} key={colour.id}>{colour.name}</option> 
  )
)

return ( 
  <form>
    <select name='shirt'><ColourOptionList /></select>
    <select name='hat'><ColourOptionList /></select> 
  </form> 
)

说明：组件每次被调用都会执行内部的映射逻辑，生成独立的Option实例，既保证了复用性，又规避了key重复问题，后续还能方便扩展过滤、排序等逻辑。

3. 给Key添加父容器标识（可选，不推荐） #

如果一定要提前生成Option数组，可以给每个key加上父组件的唯一标识（比如select的name），确保全局唯一：

const colours=[ 
  {name:'red',hex:'ff0000',id:'4855r234'}, 
  {name:'green',hex:'00ff00',id:'1324855g'}, 
  {name:'blue',hex:'0000ff',id:'b324899'} 
] 

const createColourOptions = (prefix) => colours.map(colour => 
  <option value={colour.hex} key={`${prefix}-${colour.id}`}>{colour.name}</option> 
) 

return ( 
  <form>
    <select name='shirt'>{createColourOptions('shirt')}</select>
    <select name='hat'>{createColourOptions('hat')}</select> 
  </form> 
)

说明：通过前缀让key全局唯一，但需要额外维护标识，不如前两种方案简洁直观，仅作为特殊场景下的备选。

总结 #

优先选择方案1或方案2：方案1适合简单场景快速解决，方案2适合需要多处复用的复杂场景，两者都能在不依赖随机key的前提下，完全符合React的设计规范。

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