Javascript 显示“选择”中没有嵌套选项的组的“选择组名称”

我正在使用组件：

某些类别没有项目（标签3）。“选择”组件没有显示这样的类别，我如何修复此问题？我需要显示没有元素的类别名称

---

如果没有嵌套的选项，则需要删除

options

属性

更改

{id:5，标签：“3”，选项：[]}

=>

{id:5，标签：“3”}

编辑： 如果要将其显示为类别，则必须在选项中至少有一个元素。因此，在选项中添加一个元素并禁用它。这样做

添加

{标签：“无子类别”，已禁用：true}

添加

isOptionDisabled

props以选择组件

 <Select
   options={transformedDataWithSubItems}
   value={selectedItem}
   onChange={handleChange}
   isClearable={isClearable}
   placeholder={placeholder}
   isOptionDisabled={(option) => option.disabled}
 />

option.disabled}
/>

---

请参见

“选择组件未显示类似于此的类别…”-什么选择组件，您尚未向我们显示。如何显示其余类别？你试过什么代码？您的“”代码在哪里，我们可以看到，以便尝试提供帮助？我们对你正在做的事情一无所知，除了你在问题中提供的信息，这些信息还不足以让我们提供任何类似的帮助。我同意，添加了一个描述。我尝试了这个。如果没有选项，则它将显示为常规元素，而不是类别名称。如果要将其显示为类别，请使用“编辑的方法”。欢迎使用。我认为您应该将问题名称更新为

display select group name for group，在react select中没有嵌套选项，以供其他人将来参考
const transformedDataWithSubItems = [
  { id: 1, label: "1", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
  { id: 3, label: "2", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
  { id: 5, label: "3", options: [] }
];

const transformedDataWithSubItems = [
      { id: 1, label: "1", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
      { id: 3, label: "2", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
      { id: 5, label: "3", options: [] }
    ].map(category => {
      if (category.options.length === 0) return {id: category.id, label: category.label};
      return category;
    });

const transformedDataWithSubItems = [
 {
   id: 1,
   label: '1',
   options: [
     { label: 'sub', value: 'sub' },
     { label: 'sub', value: 'sub' },
   ],
 },
 {
   id: 3,
   label: '2',
   options: [
     { label: 'sub', value: 'sub' },
     { label: 'sub', value: 'sub' },
   ],
 },
 { id: 5, label: '3', options: [] },
].map((category) => {
 if (category.options.length === 0) {
   return { ...category, options: [{ label: 'No sub category', disabled: true }]};
 }
 return category;
});

 <Select
   options={transformedDataWithSubItems}
   value={selectedItem}
   onChange={handleChange}
   isClearable={isClearable}
   placeholder={placeholder}
   isOptionDisabled={(option) => option.disabled}
 />