reactjs 如何在Antd Design中创建选项组?

g6ll5ycj  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(122)

我尝试使用从DB返回的数据实现一个类别输入

[
  {
    _id: '63e59f91bd2a21368188ff4b',
    title: 'Uncategorized',
    slug: 'uncategorized',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:36:17.704Z',
    updatedAt: '2023-02-10T01:36:17.704Z',
  },
  {
    _id: '63e5984028745af5bad2c015',
    parentCategory: {
      _id: '63e5974a786719dd4bb2d37b',
      title: 'Projects',
    },
    title: 'YTDownloader',
    slug: 'ytdownloader',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:05:04.919Z',
    updatedAt: '2023-02-10T01:05:04.919Z',
  },
  {
    _id: '63e597c3786719dd4bb2d387',
    parentCategory: {
      _id: '63e5974a786719dd4bb2d37b',
      title: 'Projects',
    },
    title: 'Song Finder',
    slug: 'song-finder',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:02:59.742Z',
    updatedAt: '2023-02-10T01:02:59.742Z',
  },
]

我尝试的是创建documentation中给出的例子,因为我的类别几乎都是“父母”或“孩子”,不想让它们杂乱无章。
到目前为止,这是我一直在尝试,但没有成功:

<Select
  placeholder="Select category"
  defaultValue={category}
  onChange={(e) => {
    setObjectData({
      ...objectData,
      category: e,
    })
  }}
  value={category}
  options={[
    categories.map((c, i) => [
      {
        label: c.parentCategory ? c.parentCategory.title : c.title,
      },
    ]),
  ]}
/>

这实际上什么也不返回,甚至不返回错误。我所期待的是以下内容:

<Select
    defaultValue={category}
    onChange={(e) => {
      setObjectData({
        ...objectData,
        category: e,
      })
    }}
    value={category}
    options={[
      {
        label: 'Projects',
        options: [
          {
            label: 'YTDownloader',
            value: '63e5984028745af5bad2c015',
          },
          {
            label: 'Song Finder',
            value: '63e597c3786719dd4bb2d387',
          },
        ],
      },
      {
        label: 'Uncategorized',
        value: '63e59f91bd2a21368188ff4b'
        ],
      },
    ]}
  />

以前有没有人做过这样的事情?如果你们能帮我解决这个头疼了2个小时的小问题就太好了,哈哈

cs7cruho

cs7cruho1#

我的猜测是你只传递了只有label而没有value的对象到options。这只是猜测,但是如果没有对应的value到每个label,那么下拉列表中可能没有呈现任何内容。
标签是用户看到的每个选项的内容,不一定是它的底层值。
请记住,value最终将传递给onChange,因此只有一个没有值的标签可以解释为什么它什么也不做--因为有效的选项必须有值。
Map每个选项,使其value唯一地表示该选项:

categories.map((c, i) => [
      {
        label: c.parentCategory ? c.parentCategory.title : c.title,
        value: c._Id
      },
    ]),

相关问题