ant-design / ant-design/pro-components

🐛[BUG]DrawerForm,ModalForm,如果绑定上form会导致数据回显问题,且挺严重!

Open
#8,352 14 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 描述

DrawerForm,ModalForm,如果绑定上form会导致数据回显问题,且挺严重!尝试过关闭窗口form.resetFileds,以及通过open控制form都无法解决此问题!form如果去掉则没有问题,但这个不能取消掉,因为还要做额外的处理

### 📷 复现步骤

使用 DrawerForm,或ModalForm 绑上form={form}就会出现!

### 🏞 期望结果

期望绑定form={form}也能正常显示数据!

### 💻 复现代码

```
表格编辑提交数据
{
let billDate: string[] = [];
if (row.bill_start_date > 0) {
billDate.push(dayjs.unix(row.bill_start_date).format('YYYY-MM-DD'));
}
if (row.bill_end_date > 0) {
billDate.push(dayjs.unix(row.bill_end_date).format('YYYY-MM-DD'));
}
setCurrentRow({
id: row.id,
department_group_id: row.department_group_id,
region_id: row.region_id,
insurer_id: row.insurer_id,
classification_id: row.classification_id,
status: row.status,
bill_date: billDate.length === 2 ? billDate : undefined,
detail_list: row.detail_list || [],
});
setOpen(true);
}}
>
编辑

```

## 表单
```
import React, { FC } from 'react';
import { ProFormDateRangePicker, ProFormRadio, ProFormTreeSelect } from '@ant-design/pro-components';
import { fourToTwentyLW } from '@/constants';
import { Form } from 'antd';
import CusDrawerForm from '@/components/CusDrawerForm';
import { queryDepartmentGroupSelect } from '@/pages/system/policy_rules/department_group/service';
import { queryRegionTree } from '@/pages/system/setting/region/service';
import { queryInsuranceCompanyTree } from '@/pages/system/cooperation/insurance_company/service';
import { queryInsuranceTypeTree } from '@/pages/system/setting/insurance_type/service';
import Ratios from './Ratios';

export type RuleDetailList = {
commission_ratio: number;
id: number;
received_commission_ratio: number;
remark: string;
};

export type RuleCurrentRow = {
id?: number;
department_group_id?: number;
region_id?: number;
insurer_id?: number;
classification_id?: number[];
bill_date?: string[];
status?: number;
detail_list?: RuleDetailList[];
};

export type RuleDrawerFormProps = {
title: string;
open: boolean;
current: RuleCurrentRow | undefined;
onDone: () => void;
onSubmit: (values: RuleCurrentRow) => void;
};

const RuleDrawerForm: FC = (props) => {
const { title, open, current, onDone, onSubmit } = props;
const [form] = Form.useForm();

const ratioAdd = () => {
const val = form.getFieldValue('detail_list') || [];
val.push({
id: 0,
received_commission_ratio: undefined,
commission_ratio: undefined,
remark: '',
remarks: '',
});
form.setFieldValue('detail_list', val);
};

const ratioDelete = (index: number) => {
const val = form.getFieldValue('detail_list');
if (Array.isArray(val) && val.length > 0) {
val.splice(index, 1);
form.setFieldValue('detail_list', val);
form.validateFields(['detail_list']);
}
};

return (

// form={form} //如果去掉则没有问题,但这个不能取消掉,因为还要做额外的处理
title={current?.id ? `编辑${title}规则` : `添加${title}规则`}
open={open}
width={800}
currentRow={current}
onSubmit={onSubmit}
onClose={onDone}
{...fourToTwentyLW}
>
{open && (
<>
{
const res = await queryDepartmentGroupSelect();
if (res.code === 0) {
return res.data.list || [];
}
return [];
}}
rules={[{ required: true, message: '请选择组合部门' }]}
/>
{
const res = await queryRegionTree();
if (res.code === 0) {
return res.data.tree || [];
}
return [];
}}
rules={[{ required: true, message: '请选择区域' }]}
/>
{
const res = await queryInsuranceCompanyTree();
if (res.code === 0) {
return res.data.tree || [];
}
return [];
}}
rules={[{ required: true, message: '请选择保险公司' }]}
/>
{
const res = await queryInsuranceTypeTree();
if (res.code === 0) {
return res.data.tree || [];
}
return [];
}}
rules={[{ required: true, message: '请选择险种' }]}
/>




)}

);
};

## Ratios组件
```
import React from 'react';
import Link from 'antd/es/typography/Link';
import { Form, Input, InputNumber } from 'antd';
import '@/style/cus-table.less';

type RatiosProps = {
name: string;
onAdd?: () => void;
onDelete?: (index: number) => void;
};

const Ratios = (props: RatiosProps) => {
const { name, onAdd, onDelete } = props;

return (



{(fields) => {
if (fields.length === 0) {
return (

);
}
return fields.map((field) => {
return (

);
});
}}










ID
佣金应收比例(%)
佣金应付比例(%)
备注

新增






暂无数据























onDelete?.(field.key)}>
删除






);
};

export default Ratios;
```
export default RuleDrawerForm;

```

## 视频录屏情况

https://github.com/ant-design/pro-components/assets/12706830/226cc922-51ed-4274-a887-ee44e1517d28

https://github.com/ant-design/pro-components/assets/12706830/455bd6f4-c3ba-463d-a6a0-e0ddeb775268

## 取消掉form情况

https://github.com/ant-design/pro-components/assets/12706830/4a86f82d-7e47-4c5d-bf90-2e928e1b072e

```
通过

{({ getFieldValue }) => {

去拿数据打印出来,明显看到是上一次的数据,非本次提交过来的数据。
```

## 相关有人提的bug
[https://github.com/ant-design/pro-components/issues/7925](url)

@Gzbox 你有解决掉这个情况吗?

### © 版本信息

- ProComponents 版本: [e.g. 2.7.1]
- umi 版本 4.1.10
- 浏览器环境 chrome
- 开发环境 [e.g. mac OS]

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the supplied RuleDrawerForm example, including form={form}, and compare it with the version where that prop is removed. Read the CusDrawerForm integration and the related issue #7925 first. Done means DrawerForm and ModalForm display the current submitted record rather than values from the previous record when a bound form is used.

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
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.