在 Ant Design Vue 中修复“getFieldDecorator”覆盖“value”警告：使用“setFieldsValue”更新表单

修复“getFieldDecorator”覆盖“value”警告：使用“setFieldsValue”更新表单

导语：
在构建基于 Ant Design Vue 的自定义表单组件时，您可能会遇到令人沮丧的警告：“getFieldDecorator”将覆盖“value”，因此请不要直接设置“value and v-model”，并使用“setFieldsValue”来设置它。

问题根源：
此警告的根源在于同时设置“value”属性和“v-decorator”。Ant Design 表单使用“getFieldDecorator”来管理表单字段，而“value”属性通常用于 Vue 中的双向绑定。当您同时使用这两个功能时，就会触发这个警告。

解决方案：
解决此问题的步骤很简单：

1. 移除“value”属性： 从子组件中删除“value”属性。
2. 使用“ref”访问子组件： 在父组件中，使用“ref”属性来访问子组件。
3. 使用“setFieldsValue”更新表单： 在需要更新表单时，使用“setFieldsValue”方法。

通过采取这些步骤，您可以修复警告并实现表单更新的预期行为。

代码示例：

父组件：

<a-form-item label="account">
  <ReceiverAccount ref="receiverAccount" />
</a-form-item>

子组件：

<template>
  <a-input-group compact>
    <a-select @change="handleTypeChange" />
    <a-input @change="handleNumberChange" />
  </a-input-group>
</template>

<script>
export default {
  data() {
    return {
      type: 'alipay',
      number: ''
    }
  },
  methods: {
    handleTypeChange(val) {
      this.$emit('change', { val })
    },
    handleNumberChange(e) {
      const number = parseInt(e.target.value || 0, 10)
      this.$emit('change', { number })
    }
  }
}
</script>

更新表单：

this.$refs.receiverAccount.triggerChange({ number: 12345 })

结论：
通过实施这些解决方案，您可以消除警告，并有效地更新 Ant Design Vue 表单中的数据。

常见问题解答：

1. 为什么我会收到这个警告？

   • 因为您同时使用了“value”属性和“v-decorator”。

2. 如何修复它？

   • 移除“value”属性，使用“ref”访问子组件，并使用“setFieldsValue”来更新表单。

3. 为什么我应该使用“setFieldsValue”？

   • 因为“setFieldsValue”是 Ant Design Vue 推荐的更新表单的方法。

4. 我可以使用其他方法吗？

   • 虽然可以，但使用“setFieldsValue”是首选方法。

5. 为什么“getFieldDecorator”会覆盖“value”？

   • 因为“getFieldDecorator”旨在管理表单字段，而“value”属性通常用于双向绑定。