ant-design / ant-design/pro-components
🐛[BUG] ProFormList下的FormItem设置Preserve={false} 导致复制出的新行将失去数值
- 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此行就会导致新增的行数据被删
### 📷 复现步骤
复制前

复制后的结果

### 🏞 期望结果
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
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