使用服务端返回JSON数据渲染下拉框时出现key prop唯一警告如何修复

API 探路者

2026-9-26

问题修复方案

这个警告的核心原因是你渲染列表时所有`<option>`的`key`属性值存在重复，结合你提供的代码，常见的问题和修复方法如下：

1 最高概率根因：Redux Reducer处理逻辑错误

你当前请求接口拿到的futurePairs是完整的选项数组，但是你调用的action命名为addAvailableFuturesPair（单数，意为添加单个选项），大概率你的Reducer里对应逻辑是把传入的整个数组当成单个元素追加到了availableFuturesPairs数组中，最终得到的数组结构为嵌套结构：

// 错误的最终结构
availableFuturesPairs: [
  [ { "symbol":"one option" }, { "symbol":"second option" } ]
]

这时候你遍历availableFuturesPairs时拿到的option实际是内层的整个数组，option.symbol取值为undefined，所有<option>的key都为undefined自然重复。

修复方法

调整Reducer中对应ADD_AVAILABLE_FUTURES_PAIR的处理逻辑：
如果是全量替换可选选项列表，直接赋值即可：

case ADD_AVAILABLE_FUTURES_PAIR:
  return {
    ...state,
    availableFuturesPairs: action.payload.newPair
  }

如果是在原有列表基础上追加新选项，要把传入的数组展开再追加：

case ADD_AVAILABLE_FUTURES_PAIR:
  return {
    ...state,
    availableFuturesPairs: [...state.availableFuturesPairs, ...action.payload.newPair]
  }

2 次要可能根因：接口返回的symbol字段存在重复

如果确认Reducer逻辑没问题，检查接口返回的列表中是否存在多个对象的symbol字段值相同的情况。

修复方法

优先保证symbol作为业务唯一标识不重复，继续用option.symbol作为key
如果列表没有排序、动态增删的需求，可以临时用遍历索引作为兜底key：

<Select
    onChange={event => changeSelectedFuturesPair(event.target.value)}
    value={props.selectedFuturesPair}>
    {props.availableFuturesPairs.map((option, index) => (
        <option key={index} value={option.symbol}>{option.symbol}</option>
    ))}
</Select>