Ant Design Form调用setFieldsValue无法更新Form.Item内Checkbox选中值

问题根因 #

你遇到的Checkbox状态不更新的问题，常见有两个原因：

1. 传入IsCurrentRecord的字段值不是标准布尔值，比如是字符串类型的"true"/"false"、数字1/0，Checkbox的checked属性只识别布尔值，非布尔值会被隐式转换导致状态不符合预期
2. Checkbox组件冗余添加了name属性，和上层Form.Item的name配置产生绑定冲突

修复方案 #

按以下步骤调整代码即可：

1. 移除Checkbox上的name属性，表单字段绑定由上层Form.Item统一处理即可
2. 给IsCurrentRecord赋值时显式转换为布尔值，避免类型问题导致的状态异常
3. 可使用可选链简化取值逻辑

修改后的完整代码如下：

const RecordsForm = ({ selectedRecord, recordComponentForm }) => {
  useEffect(() => {
    recordComponentForm.setFieldsValue({
      Title: selectedRecord?.Title ?? null,
      // 显式转布尔值，确保传给Checkbox的checked属性是合法布尔类型
      IsCurrentRecord: selectedRecord ? !!selectedRecord.IsCurrentRecord : true,
    });
  }, [recordComponentForm, selectedRecord]);

  return (
    <Form
      name="seasonForm"
      autoComplete="off"
      layout="inline"
      form={recordComponentForm}
    >
      <Form.Item
        label="Title"
        name="Title"
        rules={[{ required: true, message: "Add a Title" }]}
      >
        <Input placeholder="Season Title" />
      </Form.Item>

      <Form.Item
        label="Is Active Record"
        name="IsCurrentRecord"
        valuePropName="checked"
      >
        {/* 移除冗余的name属性 */}
        <Checkbox />
      </Form.Item>
    </Form>
  );
};

export default RecordsForm;

补充验证 #

如果调整后还是有问题，可以在useEffect里打印selectedRecord.IsCurrentRecord的类型和值，确认字段存在且值符合预期：

useEffect(() => {
  console.log(typeof selectedRecord?.IsCurrentRecord, selectedRecord?.IsCurrentRecord)
  // 其余逻辑不变
}, [recordComponentForm, selectedRecord])

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