React中使用Formik提交表单时如何将gcloud字段以对象类型发送？

你当前的问题出在错误使用了JSON.stringify——用户在文本域输入的是JSON格式的字符串，你需要把它解析成JavaScript对象再传给后端，而不是把字符串再次转成JSON格式的字符串。

1. 修改提交逻辑，解析JSON字符串 #

在Formik的onSubmit方法中，先把输入的gcloud_keyfile解析为对象，同时添加错误处理防止无效JSON导致报错：

const { values, errors, touched, handleBlur, handleChange, handleSubmit } =
  useFormik({
    initialValues,
    validationSchema: GcpSchema,
    onSubmit: async (values, action) => {
      try {
        // 解析用户输入的JSON字符串为对象
        let gcloudKeyfileObj;
        try {
          gcloudKeyfileObj = JSON.parse(values.gcloud_keyfile);
        } catch (parseError) {
          console.error("无效的JSON输入:", parseError);
          setMsg("请输入有效的Gcloud密钥文件JSON格式");
          return;
        }

        let response = await axios.post(
          `${state.baseUrl}accounts/gcp/`,
          {
            organization: values.organ,
            environment: values.env,
            gcloud_keyfile_json: gcloudKeyfileObj, // 直接传递解析后的对象
          });
        if (response.status === 200) {
          setMsg("账户创建成功");
          action.resetForm();
          return Promise.resolve();
        }
      } catch (error) {
        console.error("提交出错!", error);
        setMsg("提交失败，请稍后重试");
      }
    },
  });

2. 可选：前端提前验证JSON合法性 #

为了提升用户体验，可以在表单验证阶段就检查输入的JSON是否有效，比如用Yup添加自定义验证规则：

import * as Yup from 'yup';

const GcpSchema = Yup.object().shape({
  organ: Yup.string().required('组织名称为必填项'),
  env: Yup.string().required('环境名称为必填项'),
  gcloud_keyfile: Yup.string()
    .required('Gcloud密钥文件为必填项')
    .test(
      'valid-json',
      '请输入合法的JSON格式',
      (value) => {
        if (!value) return true;
        try {
          JSON.parse(value);
          return true;
        } catch (e) {
          return false;
        }
      }
    ),
});

关键说明 #

• 后端需要的是对象类型数据，所以必须把用户输入的JSON字符串通过JSON.parse转为对象，而不是用JSON.stringify再次序列化（那样会把字符串变成带引号的JSON字符串，后端无法识别为对象）。
• 解析过程一定要加try-catch，否则用户输入无效JSON时会导致代码崩溃。

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