ant-design / ant-design/pro-components

🐛[BUG] ProFormList下的FormItem设置Preserve={false} 导致复制出的新行将失去数值

Open
#8,208 1 comment 1 reaction 0 assignees View on GitHub
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 描述

ProFormList的children只要set了preserve={false},copy此行就会导致新增的行数据被删

### 📷 复现步骤

复制前
![image](https://github.com/ant-design/pro-components/assets/84807215/0731c8f3-4a2a-46ed-b251-5b6d4251898e)
复制后的结果
![image](https://github.com/ant-design/pro-components/assets/84807215/e1ade275-b701-42fd-a1db-f375e71ecd15)

### 🏞 期望结果

formItem不被render时候数据可以自动清理,并且copy该行也能保留数据

### 💻 复现代码

```
(

<>Sequence {listMeta.index + 1}
value.toUpperCase()} />


}
extra={

} onClick={() => {
printerStatusActionRef.current?.move(listMeta.index, listMeta.index + 1)
}} disabled={listMeta.fields.length === 1 || listMeta.index + 1 === listMeta.fields.length} />
} onClick={() => {
printerStatusActionRef.current?.move(listMeta.index, listMeta.index - 1)
}} disabled={listMeta.fields.length === 1 || listMeta.index === 0} />
} type='primary'
onClick={() => {
const data = printerStatusActionRef.current?.get(listMeta.index)
const { sequenceTitle, ...newData } = data; // remove sequenceTitle
listMeta.operation.add(newData, listMeta.index + 1)
}} />
{listMeta.fields.length > 1 &&
}
type='primary' danger
onClick={() => {
listMeta.operation.remove(listMeta.index)
}} />}

}
style={{
marginBlockEnd: 8,
border: '2px solid rgba(5, 5, 5, 0.1)',
width: 1091
}}
bodyStyle={{ paddingBlockEnd: 0 }}
>

{dom.listDom}


)}
>
{(_, rowIndex: number) => {
return (

{
listFormRef.current?.setFieldValue(['full', rowIndex, 'sequenceTitle'], undefined)
}} />

{({ printerStatus }) => {
switch (printerStatus) {
case PrinterStatus.printing:
return <>

value.toUpperCase()}
/>


// 一段很长的代码

default:
return
}
}}


);
}}

```
FormDurationPicker 里设了 preserve false
```
const FormDurationPicker = () => {
const durationFormat = "HH[h] mm[m] ss[s]";
const defaultFormat = "YYYY-MM-DD HH:mm:ss";
const outputFormat = "HH,mm,ss";

return {
// to handle value is different format
let result = dayjs(value, [durationFormat, defaultFormat], true)
return result.format(outputFormat)
}} />;
}
```

### © 版本信息

"@ant-design/pro-components": "^2.6.30",
"antd": "^5.14.2",

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Reproduce this with ProFormList, the nested ProFormDependency, and FormDurationPicker using preserve={false}. Start by tracing the list copy operation and how unmounted fields are preserved or cleared; inspect nearby ProFormList tests if available. Done means copying a row retains its values while fields removed by preserve={false} still clear when their form item is no longer rendered.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.