Form.List 中的某一项删除后，其他字段也被意外影响了

ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.

https://mobile.ant.design

MIT License

11.66k stars 2.41k forks source link

Form.List 中的某一项删除后，其他字段也被意外影响了 #5609

Open awmleer opened 2 years ago

awmleer commented 2 years ago

Version of antd-mobile

5.22.0

Operating system and its version

Others

Browser and its version

Chrome

Sandbox to reproduce

https://stackblitz.com/edit/react-ts-ufnhw9?file=App.tsx

What happened?

复现方法是：

打开上面的 demo
点添加按钮，添加三项内容，并分别输入一些值
删除第二项
发现此时第三项的值也异常了

预期行为：

点击删除之后，第三项的值保持不变，仅第二项被删除掉

额外一点补充：

把 Form 上的 preserve={false} 去掉就行为正常了疑似 rc-field-form 的问题

Relevant log output

No response

IronKinoko commented 2 years ago

<Form.Item 
+ isListField
  name={[index, 'checkConfig']}
  label={`"bug"-${index}`}

加上这个属性后就正常了。需要组件内部处理下

awmleer commented 2 years ago

噢原来是这样～还有个内部 API

@IronKinoko 你有兴趣来提个 PR 嘛

IronKinoko commented 2 years ago

我看了 antd 和 procomponent 也没处理这个，只有 preserve={false} 受影响

wine-fall commented 2 years ago

这个感觉不好改😳

要么就在 readme 里头加个提醒？

要么就基于From.Item 再封一层 Form.ArrayItem，默认加上 isListField。然后还得在 readme 里提醒用户在使用 Form.Array 的时候得使用这个 Form.ArrayItem

再要么就得大改 Form.Array 了？目前这个是直接调用 props.children() 的，而它的类型是 (fields: FormArrayField[], operation: FormArrayOperation) => ReactElement[]，这个组件层面没法控制。

RoyRao2333 commented 2 months ago

antd-4同样遇到了这个问题，但是似乎不推荐传isListField：

只有先把preserve={false}干掉了，不知道这个在antd-5中修复没有，但是目前项目原因无法完全使用V5