我尝试使用从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个小时的小问题就太好了,哈哈
1条答案
按热度按时间cs7cruho1#
我的猜测是你只传递了只有
label
而没有value
的对象到options
。这只是猜测,但是如果没有对应的value
到每个label
,那么下拉列表中可能没有呈现任何内容。标签是用户看到的每个选项的内容,不一定是它的底层值。
请记住,
value
最终将传递给onChange
,因此只有一个没有值的标签可以解释为什么它什么也不做--因为有效的选项必须有值。Map每个选项,使其
value
唯一地表示该选项: