如何使用Ant Design框架动态更新Select组件的默认选中值

Ant Design 的 defaultValue 属性仅在组件首次渲染时生效，你需要从后端异步获取状态更新选中值的场景，必须使用受控组件模式实现，具体操作如下：

实现步骤 #

1. 声明状态存储下拉框选中值，初始值设为默认的Executing（以React函数组件为例）：

import { useState, useEffect } from 'react';
import { Select } from 'antd';
const { Option } = Select;

// 组件内部代码
const [selectedStatus, setSelectedStatus] = useState('Executing');

2. 在后端接口请求的回调中更新状态值：

useEffect(() => {
  // 调用你自己封装的后端请求方法
  getBackendMissionStatus().then(res => {
    // 假设res.data.status为后端返回的状态字段，如Blocked
    const backendStatus = res.data.status;
    // 可加一层校验，避免返回值不在可选列表内导致显示异常
    const validStatusList = ['Executing','Completed','Blocked','Waiting','Offline','AllStop'];
    if (validStatusList.includes(backendStatus)) {
      setSelectedStatus(backendStatus);
    }
  })
}, [])

3. 调整原Select组件代码，绑定value和onChange属性：

<Select 
  size="small" 
  className="mission-status"
  value={selectedStatus}
  onChange={(val) => setSelectedStatus(val)}
>
  <Option value="Executing">{missionStatusConts.MISSION_STATUS.EXECUTING}</Option>
  <Option value="Completed">{missionStatusConts.MISSION_STATUS.COMPLETED}</Option>
  <Option value="Blocked">{missionStatusConts.MISSION_STATUS.BLOCKED}</Option>
  <Option value="Waiting">{missionStatusConts.MISSION_STATUS.WAITING}</Option>
  <Option value="Offline">{missionStatusConts.MISSION_STATUS.OFFLINE}</Option>
  <Option value="AllStop">{missionStatusConts.MISSION_STATUS.ALLSTOP}</Option>
</Select>

如果使用类组件，只需将状态存在组件state中，通过this.setState更新即可，绑定逻辑一致。

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