Antd Design 4中Form.Item的valuePropName与Checkbox checked冲突问题

你遇到的问题核心是Ant Design 4的Form组件采用受控式管理表单控件状态，当Form.Item设置了name和valuePropName="checked"后，Form会自动接管Checkbox的checked状态，此时手动给Checkbox添加checked属性会和Form的内置状态管理产生冲突，导致显示异常。

具体原因拆解： #

• 保留valuePropName="checked"时，Form会将自身管理的字段值（通过initialValues或setFieldsValue设置）映射到Checkbox的checked属性，你手动写的checked={promoCodeIsExpirable}会被Form的状态覆盖，所以无法按预期显示勾选状态。
• 移除valuePropName="checked"后，Form默认用value属性管理控件值，但Checkbox的checked属性不受Form控制，所以手动设置的checked能生效，但Form无法正确收集is_expirable字段的值，会导致表单提交时数据异常。

正确解决方式： #

不要手动给Checkbox加checked属性，而是通过Form的initialValues统一设置初始勾选状态，让Form全权管理控件状态：

<Form
  // 在这里设置表单初始值
  initialValues={{
    is_expirable: promoCodeIsExpirable // 你的初始勾选状态变量
  }}
>
  <Form.Item 
    name="is_expirable" 
    label="该优惠码是否可过期？" 
    valuePropName="checked"
  >
    <Checkbox onChange={onIsExpirableChange}>是</Checkbox>
  </Form.Item>
</Form>

如果后续需要动态修改Checkbox状态，不要直接修改promoCodeIsExpirable传给checked，而是使用Form实例的setFieldsValue方法：

// 通过useForm钩子获取Form实例
const [form] = Form.useForm();

// 动态更新勾选状态
const updateExpirableStatus = (status) => {
  form.setFieldsValue({
    is_expirable: status
  });
};

这种方式既保留了Form的表单联动、数据收集能力，又能正确设置初始和动态的勾选状态。

内容的提问来源于stack exchange，提问作者Saswat