在 reactjs 中使用 json 输入字段发布 api 请求

Question

我有三个输入字段的表单，类型为

我已经设计了表单，但是如何在 gcloud 字段中将数据发送为 object？ gcloud 输入字段的代码：

<label>gcloud keyfile json</label>
  <TextareaAutosize
    name="gcloud_keyfile"
    type="text"
    id="gcloud_keyfile"
    value={values.gcloud_keyfile}
    onChange={handleChange}
  />

  

而对于表单提交，我使用了 formik，代码如下所示：

const initialValues = {
    organ: "",
    env: "",
    gcloud_keyfile: "" ,
  };

  const { values, errors, touched, handleBlur, handleChange, handleSubmit } =
    useFormik({
      initialValues,
      validationSchema: GcpSchema,
      onSubmit: async (values, action) => {
        try {
          let response = await axios.post(
            `${state.baseUrl}accounts/gcp/`,
            {
              organization: values.organ,
              environment: values.env,
              gcloud_keyfile_json: JSON.stringify(values.gcloud_keyfile),
            });
          if (response.status === 200) {
            setMsg("You Are Successfully Create the Account");
            action.resetForm();
            return Promise.resolve();
          }
        } catch (error) {
          console.error("There was an error!", error);
        }
      },
    });

我使用了 json stringify 但这不起作用

Answer 1

我使用 JSON.parse(gcloud_keyfile_json) 将字符串转换为 object 并对输入字段应用验证以仅采用 object 值