如何获取Antd Select默认值并在页面加载时自动显示？

问题核心在于：onChange事件仅在用户主动切换选项时触发，页面初始化阶段不会自动触发该事件，导致用于展示选中值的状态初始为空，所以h2标签无内容。

修复方案 #

直接将状态的初始值设置为Select的默认值Lucy，页面加载时状态就持有默认值，h2标签会自动渲染对应文本。

修改代码示例 #

假设原状态初始化代码为：

const [selectedValue, setSelectedValue] = useState('');

修改为：

const [selectedValue, setSelectedValue] = useState('Lucy');

同时确保Select组件以受控模式使用（绑定value到状态）：

<Select
  value={selectedValue}
  onChange={setSelectedValue}
>
  <Option value="Jack">Jack</Option>
  <Option value="Lucy">Lucy</Option>
  <Option value="Laura">Laura</Option>
</Select>

原理说明 #

通过将状态初始值设为默认选中值，组件首次渲染时，h2标签就能读取到状态中的Lucy，直接显示Field value is Lucy。后续用户切换选项时，onChange事件会更新状态，h2标签也会同步更新内容。

若使用非受控组件（仅用defaultValue不绑定value），也可通过ref在组件挂载后获取默认值并更新状态，但受控组件的方式更简洁且符合React状态管理逻辑，推荐优先使用。

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