使用Formik的setFieldValue配合Antd Table点击编辑按钮无法填充表单如何解决

问题原因 #

你的代码同时混用了Ant Design Form的内置状态管理和Formik的状态管理，两者产生冲突：

• AntD的Form.Item绑定name属性后，会优先从AntD的form实例中读取字段值，你手动给Input绑定的formik.values.name_bank会被覆盖
• Input未绑定Formik的onChange事件，就算赋值成功后续用户输入也无法同步到Formik状态

解决方法 #

方法1：完全使用Formik管理表单（符合你的技术选型预期）

放弃AntD Form的内置状态管理，调整代码如下：

const BankForm = (props) => {
  // 移除无用的AntD form实例声明
  const columns = [
    // 其余列配置保持不变
    {
      title: "操作",
      key: "action",
      fixed: "right",
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => ChangeBank(record)}>更改</a>
        </Space>
      ),
    },
  ];
  const formik = useFormik({
    initialValues: {
      name_bank: "",
      // 其余字段保持不变
    },
    validate,
    onSubmit: (values) => {
      // 提交逻辑保持不变
    },
  });

  const ChangeBank = (record) => {
    // 单字段赋值
    formik.setFieldValue("name_bank", record.name_bank);
    // 如果表单字段和record字段完全匹配，可以用批量赋值更简洁：formik.setValues(record)
  };

  return (
    <div className={clas.tableBlock_header}>
      <Form
        // 移除form={form}属性
        layout="vertical"
        hideRequiredMark
        onFinish={formik.handleSubmit}
      >
        <Form.Item
          // 移除name="name_bank"属性，避免AntD接管字段
          label="银行名称"
          // 适配Formik的错误提示
          validateStatus={formik.errors.name_bank && formik.touched.name_bank ? 'error' : ''}
          help={formik.touched.name_bank && formik.errors.name_bank}
        >
          <Input 
            name="name_bank"
            value={formik.values.name_bank}
            // 绑定Formik的事件处理函数
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
          />
        </Form.Item>
        {/* 其余表单项按相同规则调整即可 */}
      </Form>
    </div>
  );
};

方法2：完全使用AntD Form管理（更适配AntD生态，代码更精简）

如果你没有Formik的强依赖需求，直接用AntD自带的Form实例方法实现更简单：

const BankForm = (props) => {
  const [form] = Form.useForm();
  const columns = [
    // 其余列配置保持不变
    {
      title: "操作",
      key: "action",
      fixed: "right",
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => ChangeBank(record)}>更改</a>
        </Space>
      ),
    },
  ];

  const ChangeBank = (record) => {
    // 只要record字段名和表单项name完全匹配，一行代码即可完成全量赋值
    form.setFieldsValue(record);
  };

  const onFinish = (values) => {
    // 提交逻辑
  };

  return (
    <div className={clas.tableBlock_header}>
      <Form
        form={form}
        layout="vertical"
        hideRequiredMark
        onFinish={onFinish}
      >
        <Form.Item
          name="name_bank"
          label="银行名称"
          rules={[{ required: true, message: "请输入银行名称" }]}
        >
          <Input />
        </Form.Item>
      </Form>
    </div>
  );
};

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