在 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 值