ant-design / ant-design/pro-components
🐛[BUG]ProFormDateRangePicker传入参数值导致页面崩溃,且无报错信息
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
### 🐛 bug 描述
### 📷 复现步骤
```
{
if (v) {
const s = dayjs(v[0]).unix();
const e = dayjs(v[1]).unix();
return [s, e];
}
return {
contract_date: [],
};
}}
/>
```
直接来源数据
```
const contract_date = [dayjs('2015-06-06', 'YYYY-MM-DD'), dayjs('2024-10-10', 'YYYY-MM-DD')]
```
如果我用 Form.Item来套就没有问题
```
```
同样的数据,如果用 ```ProFormDateRangePicker``` 就会报页面崩溃,且无错误信息
### 🏞 期望结果
期望正常
### 💻 复现代码
## 完整代码
```
import React, { FC } from 'react';
import {
ProFormCascader,
ProFormDateRangePicker,
ProFormRadio,
ProFormText,
ProFormTextArea,
DrawerForm,
ProFormDigit,
} from '@ant-design/pro-components';
import { fourToNineteenLW } from '@/constants';
import { InsuranceContractDrawerFormProps, InsuranceContractCurrentRow } from '../types';
import { queryInsuranceCompanyCascader } from '@/pages/system/cooperation/insurance_company/service';
import { queryDepartmentCascader } from '@/pages/system/user/department/service';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const InsuranceContractDrawerForm: FC = (props) => {
const { open, current, onDone, onSubmit } = props;
return (
open={open}
title={current?.id ? '编辑合同' : '添加合同'}
scrollToFirstError
width={800}
layout="horizontal"
request={async () => {
return Promise.resolve({
...current,
});
}}
drawerProps={{
destroyOnClose: true,
onClose: onDone,
}}
onFinish={async (values) => {
onSubmit(values);
}}
{...fourToNineteenLW}
>
{
const res = await queryInsuranceCompanyCascader();
if (res.code === 0) {
return res.data.list || [];
}
return [];
}}
fieldProps={{
showSearch: true,
}}
/>
{
const res = await queryDepartmentCascader();
if (res.code === 0) {
return res.data.list || [];
}
return [];
}}
fieldProps={{
showSearch: true,
}}
/>
{
if (v) {
const s = dayjs(v[0]).unix();
const e = dayjs(v[1]).unix();
return [s, e];
}
return {
contract_date: [],
};
}}
/>
{/**/}
{/* */}
{/**/}
);
};
export default InsuranceContractDrawerForm;
```
### © 版本信息
- ProComponents 版本: [e.g. 2.7.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
### 🚑 其他信息
Contributor guide
Research direction
Start at the ProFormDateRangePicker entry point and reproduce the crash with the shown DrawerForm, dayjs date values, and transform callback. Compare it with the working Form.Item and DatePicker.RangePicker example; done means the ProFormDateRangePicker renders normally with the provided data without an unreported page crash.
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
- 35/100