React刷新出现Encountered two children with the same key错误如何解决

AI 小北

2026-10-6

错误原因

重复Key警告的核心原因：你在拼接key时直接传入了value对象，JS 中对象做字符串拼接会自动转为[object Object]，如果同个选项组下有多个value对象，最终生成的key就会全部变成Size-[object Object]这类重复值。React依赖key识别组件节点，重复key会导致渲染时节点复用混乱，刷新时状态匹配错误，直接触发下拉展示异常。
选择选项报错的核心原因：HTML原生<select>的<option>的value属性仅支持字符串类型，你直接传入对象会被自动转为[object Object]字符串，handleOptionChange触发时拿到的e.target.value是这个无效字符串，而非你预期的对象，和原有逻辑的类型预期不匹配就会抛出错误。
刷新后默认值异常的原因：如果ProductPage构造函数中初始化的选中默认值是完整对象，而渲染出来的option的value全是[object Object]字符串，默认值和option的value无法匹配，就会出现下拉无默认选中的异常。

解决方案

修复key和option的value属性，必须使用唯一基础类型值（字符串/数字），不要直接传入对象。比如用value对象内的value字段（如果该字段在同个选项组下唯一），如果有独立id字段优先用id：

// 修复后的option渲染代码
{option.values.map(value => (
  <option 
    value={value.value} 
    key={`${this.props.option.name}-${value.value}`}
  >
    {value.value}
  </option>
))}

调整handleOptionChange逻辑，根据拿到的字符串值匹配对应的完整对象：

handleOptionChange = (e) => {
  const selectedStr = e.target.value;
  // 匹配完整的value对象
  const selectedValue = this.props.option.values.find(item => item.value === selectedStr);
  // 后续替换原有逻辑中直接使用e.target.value的部分，用selectedValue做状态更新即可
}