React中Antd Select组件defaultValue不生效，无法设置初始值

问题根源 #

组件首次渲染时dataChecked是空数组（因为fetch是异步操作，数据还没返回），而defaultValue只在组件首次渲染阶段生效，后续异步返回数据更新dataChecked后，不会触发组件重新读取defaultValue，所以看不到选中状态。

两种可行解决办法 #

1. 切换为受控模式（推荐） #

用value替代defaultValue，配合onChange同步状态，异步数据返回后能自动更新选中状态：

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

const { Option } = Select;

export default function MultiSelect() {
  const [selectedIds, setSelectedIds] = useState([]);
  const [options, setOptions] = useState([]);

  useEffect(() => {
    // 模拟异步请求
    fetch('/api/your-data-source')
      .then(res => res.json())
      .then(rawData => {
        // 生成选项列表
        const optionList = rawData.map(item => ({ id: item.id, label: item.name }));
        // 生成需要选中的id数组
        const checkedIds = optionList.map(item => item.id);
        setOptions(optionList);
        setSelectedIds(checkedIds);
      });
  }, []);

  return (
    <Select
      mode="multiple"
      value={selectedIds}
      onChange={setSelectedIds}
      style={{ width: '100%' }}
    >
      {options.map(opt => (
        <Option key={opt.id} value={opt.id}>
          {opt.label}
        </Option>
      ))}
    </Select>
  );
}

2. 延迟渲染组件 #

等异步数据加载完成后再渲染Select，确保首次渲染时defaultValue已有有效值：

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

const { Option } = Select;

export default function MultiSelect() {
  const [selectedIds, setSelectedIds] = useState([]);
  const [options, setOptions] = useState([]);
  const [isDataReady, setIsDataReady] = useState(false);

  useEffect(() => {
    fetch('/api/your-data-source')
      .then(res => res.json())
      .then(rawData => {
        const optionList = rawData.map(item => ({ id: item.id, label: item.name }));
        const checkedIds = optionList.map(item => item.id);
        setOptions(optionList);
        setSelectedIds(checkedIds);
        setIsDataReady(true);
      });
  }, []);

  // 数据未加载完成时显示占位
  if (!isDataReady) {
    return <div>加载中...</div>;
  }

  return (
    <Select
      mode="multiple"
      defaultValue={selectedIds}
      style={{ width: '100%' }}
    >
      {options.map(opt => (
        <Option key={opt.id} value={opt.id}>
          {opt.label}
        </Option>
      ))}
    </Select>
  );
}

额外校验点 #

虽然你确认过类型一致，但还是可以强制转换确保元素类型完全匹配，避免隐性类型问题：

// 生成选中数组时强制转成数字
const checkedIds = rawData.map(item => Number(item.id));

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