在 reactjs 中发出 POST 请求时，数据未插入有效负载中

Question

我有一个反应组件：

import { addPersonalInfo } from "@request/profile";
import { Button } from "@components/common/ui/Button";
import { toast } from "react-toastify";
import { ErrorMessage, Field, Formik, FormikHelpers } from "formik";
import * as yup from "yup";
// import { RadioSwitch } from "@components/common/RadioSwitch";

type FormValues = {
  present_address: {
    division: string;
    district: string;
    thana: string;
    house: string;
    // same_address: boolean;
  };
};

type IReqBody = {
  present_address: {
    division: string;
    district: string;
    thana: string;
    house: string;
    // same_address: boolean;
  };
};

const initialValues: FormValues = {
  present_address: {
    division: "",
    district: "",
    thana: "",
    house: "",
    // same_address: false;
  },
};

const CreateAddressSchema = yup.object({
  division: yup.string().required("Division is required"),
  district: yup.string().required("District is required"),
  thana: yup.string().required("Thana is required"),
  house: yup.string().required("House is required"),
});

export const CreateAddress = ({
  close,
}: {
  close: () => void;
}): JSX.Element => {
  const handleSubmit = async (
    values: FormValues,
    actions: FormikHelpers<FormValues>
  ) => {
    actions.setSubmitting(true);
    const {
      present_address: { division, district, thana, house },
    } = values;
    const reqbody: IReqBody = {
      present_address: {
        division: division,
        district: district,
        thana: thana,
        house: house,
        // same_address: boolean;
      },
    };

    try {
      const res = await addPersonalInfo(reqbody);
      if (res.status == 201) {
        toast.success("Your request is being processed");
        actions.setSubmitting(false);
        close();
      } else {
        actions.setSubmitting(false);
      }
    } catch (err) {
      toast.error("Failed to Edit Personal Information");
      actions.setSubmitting(false);
    }
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={CreateAddressSchema}
    >
      {(formikBag) => (
        <form onSubmit={formikBag.handleSubmit}>
          <div className="p-6">
            <div className="mt-6">
              <div>
                <h3 className="text-gray-600 mb-3 font-medium">Add Address</h3>
                <div className="mb-4">
                  <label className="space-y-2">
                    <p>Division *</p>
                    <Field
                      type="text"
                      className="form-input"
                      name="division"
                      placeholder="Dhaka"
                    />
                    <ErrorMessage
                      className="text-xs text-red-500"
                      component="p"
                      name="division"
                    />
                  </label>
                </div>

                <div className="mb-4">
                  <label className="space-y-2">
                    <p>District *</p>
                    <Field
                      type="text"
                      className="form-input"
                      name="district"
                      placeholder="Dhaka"
                    />
                    <ErrorMessage
                      className="text-xs text-red-500"
                      component="p"
                      name="district"
                    />
                  </label>
                </div>

                <div className="mb-4">
                  <label className="space-y-2">
                    <p>Thana *</p>
                    <Field
                      type="text"
                      className="form-input"
                      name="thana"
                      placeholder="Dhanmondi"
                    />
                    <ErrorMessage
                      className="text-xs text-red-500"
                      component="p"
                      name="thana"
                    />
                  </label>
                </div>

                <div className="mb-4">
                  <div>
                    <label className="space-y-2">
                      <p>House/Road/Village *</p>
                      <Field
                        name="house"
                        as="textarea"
                        className="form-textarea"
                        placeholder="Aa"
                      />
                      <ErrorMessage
                        className="text-xs text-red-500"
                        component="p"
                        name="house"
                      />
                    </label>
                  </div>
                </div>

                {/* <div className="mb-4">
                  <div className="flex justify-between">
                    <label className="space-y-2">
                      <p>Same as Permanent Address</p>
                    </label>
                    <RadioSwitch
                      isChecked={false}
                      // eslint-disable-next-line @typescript-eslint/no-empty-function
                      onChange={() => {}}
                    />
                  </div>
                </div> */}
              </div>
            </div>

            <div className="flex justify-end">
              <Button
                type="button"
                onClick={() => close()}
                size="sm"
                variant="text"
                style={{ marginRight: 12 }}
              >
                Cancel
              </Button>

              <Button
                type="submit"
                size="sm"
                variant="primary"
                isLoading={formikBag.isSubmitting}
                disabled={formikBag.isSubmitting}
                style={{ marginRight: 12 }}
              >
                {"Save & Next"}
              </Button>
            </div>
          </div>
        </form>
      )}
    </Formik>
  );
};

当我发出 POST 请求时，请求的有效负载是：

{
    "present_address": {
        "division": "",
        "district": "",
        "thana": "",
        "house": ""
    }
}

尽管我使用 UI 提供表单中的所有数据，但在执行请求时没有插入数据。代码块中的问题是什么？ 为了在有效负载中获取正确的数据，我需要进行哪些更改，如下所示：

{
        "present_address": {
            "division": "Dhaka",
            "district": "Dhaka",
            "thana": "Dhanmondi",
            "house": "ABC Tower"
        }
    }

Answer 1

在这里，您需要将变量直接放入 state：

const initialValues: FormValues = {
  present_address: {
    division: "",
    district: "",
    thana: "",
    house: "",
  },
}

到：

const initialValues: FormValues = {
    division: "",
    district: "",
    thana: "",
    house: "",
  },

和这里：

const {present_address: { division, district, thana, house }} = values;

改成：

const { division, district, thana, house } = values;