React使用Select组件出现defaultValue/value相关警告如何解决？

云上老周

2026-9-26

警告原因

该警告是React的下拉组件使用规范提示，触发的常见原因有两个：一是混用了UI组件库的Select组件和原生option标签，二是Select绑定的value值没有匹配到任何下拉选项的value属性。

修复方案

如果你使用的是Ant Design等UI库导出的Select组件，不能搭配原生<option>标签使用，需要引入组件库配套的Option子组件，同时给遍历生成的子项添加唯一key属性，示例代码如下：

// 先引入配套的Option组件
import { Select } from 'antd';
const { Option } = Select;

// 组件渲染逻辑
<Select
    value={props.selectedData}
>
    {props.availableData.map((option) => (
        <Option value={option.symbol} key={option.symbol}>{option.symbol}</Option>
    ))}
</Select>

如果你需要使用原生HTML下拉框，把大写的<Select>改为小写的原生<select>标签即可：

<select
    value={props.selectedData}
>
    {props.availableData.map((option) => (
        <option value={option.symbol} key={option.symbol}>{option.symbol}</option>
    ))}
</select>

保证props.selectedData的类型、取值完全匹配availableData中某一项的symbol值，初始未选择的场景可以补充占位选项避免匹配失败：

<Select
    value={props.selectedData}
>
    <Option value="">请选择</Option>
    {props.availableData.map((option) => (
        <Option value={option.symbol} key={option.symbol}>{option.symbol}</Option>
    ))}
</Select>