Antd Cascader 组件值/defaultValue 显示 ID 而不是标签

Question

所以我使用 Antd Cascader 组件（这是第一次，在大多数其他组件中使用 Antd Select过去几个月的事情）。然而，它还没有完全发挥作用。我的 options 基本上是这样的（但有更多的选项，只有 3 层深）：

const options = [
  {
    label: 'Base 1',
    value: 'base_1',
    children: [
      {
        label: 'Middle a',
        value: 'middle_a',
        children: [
          {
            label: 'Foo',
            value: 'd57b2b75-4afa-4a16-8991-fc736bce8cd5',
          },
          {
            label: 'Bar',
            value: 'd12b2b75-4afa-4a16-8991-fc736bce8cec',
          }
        ]
      },
      {
        label: 'Middle b',
        value: 'middle_b',
        children: [
          {
            label: 'Baz',
            value: 'd32b2b75-4afa-4a16-8991-fc736bce8cdd',
          },
          {
            label: 'Quux',
            value: 'dabb2b75-4afa-4a16-8991-fc736bce8ced',
          }
        ]
      }
    ]
  },
  {
    label: 'Base 2',
    value: 'base_2',
    children: [
      {
        label: 'Middle a',
        value: 'middle_a',
        children: [
          {
            label: 'Helo',
            value: 'd32bce75-4afa-4a16-8991-fc736bce8cdd',
          },
          {
            label: 'World',
            value: 'dabbac75-4afa-4a16-8991-fc736bce8ced',
          }
        ]
      }
    ]
  }
]

我像这样配置组件：

<Cascader
  options={options}
  getPopupContainer={trigger => trigger.parentNode}
  multiple={multiple}
  displayRender={label => {
    return label.join(' / ');
  }}
  value={defaultValue}
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onChange={(val: any, options: any) => {
    if (multiple) {
      const ids = serializeCascaderOptionValues(options);
      onChange?.(ids, options);
    } else {
      onChange?.(val[2] ? String(val[2]) : undefined, options);
    }
  }}
  showSearch={{
    filter: (input: string, path) => {
      return path.some(
        option =>
          String(option?.label).toLowerCase().indexOf(input.toLowerCase()) >
          -1
      );
    },
  }}
/>

Where，here，value或 defaultValue 我传入一个像 ['d32bce75-4afa-4a16-8991-fc736bce8cdd'] 这样的数组，它映射到 Base 2/中a/Helo。当我从 UI 中选择值 Base 2 / Middle a / Helo 时，它会在输入中正确显示。但是当我保存它并刷新页面时（保留到后端，并像 value={['d32bce75-4afa-4a16-8991-fc736bce8cdd'] 一样传入 value={value} }，当我登录时，它显示输入中的 ID 哈希，而不是漂亮的字符串 Base 2 / Middle a / Helo。 displayRender={label...}，label 显示的是 [ID-hash]，而不是类似 的数组 ，如何让它正确显示？

['Base 2', 'Middle a', 'Helo']。我做错了什么 19iWs.png" rel="nofollow noreferrer">