ANTD 表单联动与数据回填怎么做？

Question

问题描述

antd表单项之间存在联动，有些字段依赖另一个字段来控制是否渲染，如果只是单纯的录入没问题，可以在render阶段通过form.getFieldValue来做条件渲染，但是现在如果要从后台获取数据，这个表单要兼顾录入与更新功能，如何控制呢？

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）
https://codesandbox.io/s/comp...

默认情况下是录入模式，在右边浏览器上加上请求参数就会进入回显模式，可以看到Input1和Input2渲染出来了，但是没有值，原因是setFieldsValue发生在渲染前

你期待的结果是什么？实际看到的错误信息又是什么？

我期望能够通过Select选项来控制其他一些字段的渲染，不管是新的录入还是更新时

Answer 1

为什么不用 initialValue 这个属性呢？

用这个属性设置初始值就没有任何问题。

Answer 2

已解决，
这个问题的关键是数据回填时，后台接口获取的数据与表单项不一致，
需要通过this.props.form.getFieldsValue()拿到当前表单所有表单项，
再通过this.props.form.setFieldsValue({})将后台数据回填至表单中，
那么就带来一个冲突，数据回填时，有些表单项还未渲染，就是空的，

目前的解决办法：

• 表单联动时，通过this.props.form.getFieldValue获取条件
• 数据回填时，通过this.state.data获取条件

然后在render里使用
getFieldValue('select') || this.state.data.select的方式，
使条件渲染可以通过，先渲染出来Form.Item，然后再setFieldsValue

这只是我当前遇到的情况的最小改动解决，Form和State依然是分离开的，还存在一点小问题，比如数据回填后，Select切换时，条件渲染字段值就为空了，不过不影响我的需求，感觉最恰当的解决办法还是需要做双向绑定，比如使用mapPropsToFields onFieldsChange。