如何使用 formik 和 axios 提交請求

Question

我想用 Axios 發布一些數據並且我正在使用 formik 但由於 formik 不需要外部狀態來跟蹤輸入字段我不知道在 Axios 發布請求的有效負載中傳遞什么

const Form = () => {

  const submitHandler = (e) => {
    e.preventDefault();
    axios
      .post("http://127.0.0.1:8000/todo/todos/", {
       // i dont know what to put here, before i use formik it was like this 
      //state,})
  };
  return (
    <Formik
      initialValues={{
        title: "",
        description: "",
      }}
      validationSchema={validate}
    >
      {(formik) => (
        console.log(formik.values),
        (
          <StyledForm onSubmit={submitHandler}>
            <div>
              <div>
                <Input
                  name="title"
                  type="text"
                />
              </div>
              <div>
                <Textarea
                  type={"text"}
                  name="description"
                  as="textarea"
                />
              </div>
            </div>
          </StyledForm>
        )
      )}
    </Formik>
  );
};

export default Form;

Answer 1

由於Formik處理您的values ，因此您也應該使用它來提交表單。

您傳遞給Formik的onSubmit函數具有您需要的所有values 。

  const submitHandler = (values) => {
    axios.post("http://127.0.0.1:8000/todo/todos/", values);
    // further handling
  };

  return (
    <Formik
      initialValues={{
        title: "",
        description: "",
      }}
      validationSchema={validate}
      onSubmit={(values) => submitHandler(values)}
    >
  ...