AntD Select组件选中显示ID而非名称的问题修复咨询

问题原因 #

你的代码中为<Option>设置了value={item.id}，AntD Select默认会将选中的value值作为显示内容，因此选中后会展示ID而非名称。

解法一：使用labelInValue属性（推荐） #

给Select组件添加labelInValue属性，组件会自动将选中值处理为包含value（对应Option的value）和label（对应Option的显示文本）的对象，从而在选中后展示名称。

示例代码：

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

const MyComponent = () => {
    const data = [
      {
        id: "5c83c2d0-e422-4eb6-b2cb-02fe60045e6e",
        name: "Item 1"
      },
      {
        id: "1b9175f9-750a-48c1-bbf7-0ff9a2fde7da",
        name: "Item 2"
      }
    ];
    // 状态存储选中的对象：{ value: id, label: name }
    const [selectedItem, setSelectedItem] = useState(null);

    const handleChange = (selected) => {
        setSelectedItem(selected);
        // 如需获取ID，使用 selected.value；如需获取名称，使用 selected.label
    };

    return (
       <Select
         value={selectedItem}
         onChange={handleChange}
         labelInValue
         placeholder="请选择"
       >
            {data.map((item) => (
                <Option value={item.id} key={item.id}>{item.name}</Option>
            ))}
       </Select>
    );
};

解法二：手动匹配选中项名称 #

如果不想使用labelInValue，可以维护一个存储选中ID的状态，通过ID从数据源中匹配对应的名称，再通过Select的displayRender属性自定义显示内容。

示例代码：

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

const MyComponent = () => {
    const data = [
      {
        id: "5c83c2d0-e422-4eb6-b2cb-02fe60045e6e",
        name: "Item 1"
      },
      {
        id: "1b9175f9-750a-48c1-bbf7-0ff9a2fde7da",
        name: "Item 2"
      }
    ];
    const [selectedId, setSelectedId] = useState('');

    // 自定义显示内容：根据选中ID匹配名称
    const renderDisplay = (value) => {
        const targetItem = data.find(item => item.id === value);
        return targetItem ? targetItem.name : value;
    };

    return (
       <Select
         value={selectedId}
         onChange={setSelectedId}
         displayRender={renderDisplay}
         placeholder="请选择"
       >
            {data.map((item) => (
                <Option value={item.id} key={item.id}>{item.name}</Option>
            ))}
       </Select>
    );
};

额外注意 #

你提供的原始代码中，data数组内的对象属性末尾缺少逗号（如id属性后未加,），这会导致语法错误，需要先修正才能正常运行。

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