ant-design / ant-design/pro-components

🐛 [BUG] ProFormSelect 中传递了默认值,但没有渲染在显示区域中

Open
#8,378 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述
ProFormSelect 中传递了默认值,但没有渲染在显示区域中,并且显示区域是空的,连占位符都没有显示,这说明可能有值但没有被正确渲染

### 📷 复现步骤 | Recurrence steps
运行代码

### 🏞 期望结果 | Expected results
正确设置初始值

### 💻 复现代码 | Recurrence code
```tsx
import { GetCategories } from '@/services/api/category';
import { SelectOptionType } from '@/typings';
import { ProFormSelect, ProFormSelectProps } from '@ant-design/pro-components';
import { BaseOptionType } from 'antd/es/select';
import React from 'react';

const ProformSelectCategory = (
props: ProFormSelectProps,
): React.ReactElement => {
const fetchCategoryList = async ({ keyWords }: { keyWords: string; }): Promise => {
// if (!keyWords) return [];

console.debug(' 搜索的关键字: ', keyWords, props.initialValue);

try {
const data = await GetCategories();
return data.map((it): SelectOptionType => {
return { label: it.name!, value: it.id!, key: it.id };
});
} catch (e) {
console.debug('没有找到该分类');
return [];
}
};

return (

fieldProps={{
labelInValue: true,
}}
{...props}
request={fetchCategoryList}
/>
);
};

export default ProformSelectCategory;

```

### © 版本信息

- Ant Design Pro 版本: 2.6.48
- umi 版本 2.2.2
- 浏览器环境 Edge
- 开发环境 Windows Edge

### 🚑 其他信息
![image](https://github.com/ant-design/ant-design-pro/assets/96331179/b32b48e5-da4e-4cca-8590-ef89b54d47a3)

补充 props.initialValue 的值是一个数字类型的id,对应 ` { label: it.name!, value: it.id!, key: it.id };`中的 value 和 key

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the provided ProformSelectCategory wrapper, focusing on ProFormSelect with fieldProps.labelInValue, props.initialValue, and the fetchCategoryList request. Check how the asynchronously returned options interact with the numeric initial value; done means the matching category label renders in the select and the empty display behavior is resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.