antd动态增减表单如何使用mapPropsToFields方式信息回填？

[fly-sheep]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1.点击”手动赋值“按钮，表单信息可回填；
2.点击”信息回填“按钮，表单信息清空；

What is expected?

期望通过mapPropsToFields方法对表单进行信息回填

What is actually happening?

目前只能通过setFieldsValue方式进行回填

Environment	Info
antd	3.23.3
React	16.9.0
System	ios
Browser	chrome

---

在实际业务中，我们通常需要在父组件异步获取到一些表单信息，然后通过mapPropsToFields方式对表单进行信息回填；单模块表单没问题，但是对于动态增减的表单这种回填方式不行。

[zombieJ]

https://codesandbox.io/embed/antd-reproduction-template-jwqn5

[ant-design-bot]

Hello @fly-sheep, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please don't ask usage questions here. You can try to ask questions on Stack Overflow or Segment Fault, then apply tag antd and react to your question.

你好 @fly-sheep，Ant Design Issue 板块是用于 bug 反馈与需求讨论的地方。请勿询问如何使用的问题，你可以试着在 Stack Overflow 或者 Segment Fault 中提问（记得添加 antd 和 react 标签哦~）。

[fly-sheep]

https://codesandbox.io/embed/antd-reproduction-template-jwqn5

你好，粘贴这个地址是什么意思？

[afc163]

https://codesandbox.io/embed/antd-reproduction-template-jwqn5

链接贴错了？这个就是主楼的链接

[zombieJ]

汗，给的预览模式改完不能保存 😂
https://codesandbox.io/s/antd-reproduction-template-9lf67

[fly-sheep]

汗，给的预览模式改完不能保存 😂
https://codesandbox.io/s/antd-reproduction-template-9lf67

有个疑问就是为什么通过setFieldsValue方式我只需要丢一个{ labName: [0, 1] }对象进去就能回填两个模块的表单，而通过mapPropsToFields方式需要拆分成{labName[0]: 0, labName[1]: 1}这种对象去回填呢？这种内部处理机制会对开发者造成困扰……

[zombieJ]

setFieldsValue 是设置值，而 mapPropsToFields 是设置字段，除了值还能设置错误信息等 meta 数据。两个控制范畴是不一样的。

[fly-sheep]

setFieldsValue 是设置值，而 mapPropsToFields 是设置字段，除了值还能设置错误信息等 meta 数据。两个控制范畴是不一样的。

谢谢解答，希望后续动态增减表单的demo把mapPropsToFields方式回填信息加进去，避免开发者陷入相同的困扰……

[maplehsu]

如果form表单里面有Upload上传，上传成功以后多次触发mapPropsToFields，而且会把之前input填写的值给重置掉请问为什么

[fly-sheep]

因为触发mapPropsToFields方法会对表单重新赋值，你之前填写的内容需要存储到父组件去；可以参考https://ant.design/components/form-cn/#components-form-demo-global-state 表单数据存储的那个例子

[maplehsu]

感谢，这个重新赋值，为什么 input onchange 没事 但是 upload就会触发呢 奇怪

[maplehsu]

我最后用initialValue解决回显问题。在父组件把回显值传过来，然后清空也在父组件，但是不能用官方mapPropsToFields 这个自动好难受。

[fly-sheep]

你用upload上传附件会调用接口，如果这个触发了父组件render（比如用redux进行数据存储），子组件mapPropsToFields方法就会被触发导致重新赋值；这本身跟mapPropsToFields是没什么关系的；使用mapPropsToFields方式做信息回填通常需要将子组件的状态都需要存储在上层，然后每次状态更新从上层传递下来的props中都是最新状态