ant-design / ant-design/pro-components
🐛[BUG]Select在允许多选、search且通过远程获取数据时,选中项显示value,而不是label
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
当我使用ProForm组件时,希望使用不显示在table表格里面的column元素,作为search项进行查询,相关的column元素定义如下, 是一个允许远程请求得到相应options且允许多选的select
`
const [
featureOptions,
setFeatureOptions
] = useState<{ label: string, value: number }[]>([]);
let columns = [
...,
getBaseSelectConfig(
{
title: '特征',
placeholder: '请选择特征',
key: 'featureIds',
options: featureOptions,
handleSearchFunc: fetchFeatureOptions,
}
),
]
function getBaseSelectConfig(
{
title,
placeholder,
key,
options,
handleSearchFunc = async (value: string) => {
},
}:
{
title: string,
placeholder: string,
key: string,
handleSearchFunc?: (value: string) => Promise,
options: { label: string, value: number }[],
}
): ProColumnType {
return {
title: title,
key: key,
valueType: 'select',
hideInTable: true,
fieldProps: {
mode: 'multiple',
allowClear: true,
placeholder: placeholder,
showSearch: true,
filterOption: false,
autoClearSearchValue: true,
onSearch: handleSearchFunc,
defaultActiveFirstOption: false,
labelInValue: true, // 新增:让选中项携带 label,显示时用 label
notFoundContent: null,
options: options,
} as SelectProps,
}
}
async function fetchFeatureOptions(values: string): Promise {
currentValueOfFeatureSearch = values;
if (!values || values.trim() === '') {
setFeatureOptions([]);
} else {
try {
////可以认为是异步获取形式为 {label: string, value: number}[] 的数据
const data = await getFeatureCaseLibSearchOptionsOfFeature({
type: FeatureCaseLibType.Feature,
keywords: values,
size: 50,
});
if (currentValueOfFeatureSearch === values) {
console.log('fetched feature options:');
console.log(data);
setFeatureOptions(data);
}
} catch (error) {
message.error(ErrorMessage.fetchFeatureOptionsFailed);
}
}
}
`
得到的效果如图所示:
其中,我发现存在通过search搜索结果,然后选中其中的某一条数据,会显示value,而不是显示label的问题,而这个显示的内容也跟这个获得options里面其中一个的value是相对应的
目前我通过设置 labelInValue: true 解决了该问题,但请问这个问题的根源是什么?并且有没有其他更加优雅的解决方案,从而让我不必在查询数据request时,还要进行额外的数据格式转化
Contributor guide
Research direction
Start with the ProForm select configuration shown in the issue, especially fieldProps, remote options, multiple mode, and labelInValue. Reproduce the search-and-select flow, then trace how selected values are mapped back to displayed labels; done means documenting the root cause and a supported solution that avoids request-side option conversion.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100