AntD Select 中选择的值

Question

我正在使用 AntD select 组件，正如您在附图中看到的，当选择其任何选项时，AntD select 显示“id”而不是“name”。有解决办法吗？

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

    return (
       <Select>
            {data.map((item) => (
                <Option value={item.id} key={item.id}>{item.name}</Option>
            )}
       </Select>
    );
};

Answer 1

Ant design

<Option>

有一个名为

label

的道具来更改显示的文本。

因此，不要将

item.name

作为子组件传递，而是将其作为

label

属性传递：

return (
   <Select>
        {data.map(item => (
            <Option value={item.id} key={item.id} label={item.name} />
        )}
   </Select>
);

Answer 2

晚上好 出现错误？ “选项”未定义

代码：

  <Select>
       {categoris?.map((c)=>
       <Option  Key={c._id}  value={c.name} 
         label= {c.name}>{c.name} </Option>)}
  </Select>