Ant Design Select 为什么无法显示默认选中的值？

♫圣恩提问于 2026-03-26 11:26:21 阅读 23

组件

我用 Ant Design 的 Select 组件，传了 value="2"，但页面上还是空白，没选中任何选项。数据是异步加载的，难道是因为这个？

我的选项数据结构是这样的：

const options = [
  { value: '1', label: '选项一' },
  { value: '2', label: '选项二' },
  { value: '3', label: '选项三' }
];

组件写法：<Select value="2" options={options} />，但就是不显示“选项二”，控制台也没报错，有点懵。

我来解答赞 3 收藏

反馈

1 条解答

锦玉 ☘︎ Lv1

看起来是异步数据加载的问题。虽然控制台没报错，但你得确认 Select 组件在 options 数据加载完成时是否已经渲染过了。

试试把 Select 组件改成受控组件，用 state 来管理 value。这样可以确保数据加载完成后重新渲染组件。

import React, { useState, useEffect } from 'react';

import { Select } from 'antd';



const MyComponent = () => {

  const [options, setOptions] = useState([]);

  const [value, setValue] = useState('2');



  useEffect(() => {

    // 模拟异步数据加载

    setTimeout(() => {

      setOptions([

        { value: '1', label: '选项一' },

        { value: '2', label: '选项二' },

        { value: '3', label: '选项三' }

      ]);

    }, 1000);

  }, []);



  return <Select value={value} options={options} onChange={setValue} style={{ width: 120 }} />;

};

调试看看这个写法能不能解决问题。记得检查数据加载和组件渲染的时机配合。要是还不行，可能要看看 Ant Design 版本兼容性问题了，有时候版本更新会带来一些意想不到的变化。

2026-03-26 12:07