React formik Create and update form in single form issues

Question

I am using React formik I created Create form and update form in a single component. The update based on the One id if update means on page the id will be send in post method and get an data Database and the data show in the input field and update also working fine.But in the rendering component are slow and cause lot of errors and I want useEffect will be outside render function and the field working a slight delay after typing to display

Any Idea and any better Method Thank you for Help

import React, { useEffect, useState } from "react";
import { Formik, Field, Form, FastField } from "formik";
import axios from "axios";
import {
  Button,
  TextField,
  Grid,
  makeStyles,
  MenuItem,
  FormControl,
  Select,
  InputLabel,
  Checkbox,
  FormControlLabel
} from "@material-ui/core/";

const baseurl = "http://localhost:8080/api/v1/";
const useStyles = makeStyles((theme) => ({
 
}));

function App() {
  const classes = useStyles();
  var PropertyId = sessionStorage.getItem("Propertyid");
  const data = { propertyId: PropertyId };
  const isAddMode = !PropertyId;

  const initialValues = {
    propertyName: "",
    displayName: "",
    description: "",
    propertyType: ""
  };

  function onSubmit(fields, { setStatus }) {
    setStatus();
    if (isAddMode) {
      createProperty(fields);
    } else {
      updateProperty(fields);
    }
  }

  function createProperty(fields) {
    axios
      .post(baseurl + "propertybasicpropertydetails", fields, {
        headers: {
          "Access-Control-Allow-Origin": "*"
        }
      })
      .then((res) => {
        sessionStorage.setItem("Propertyid", JSON.stringify(res.data));
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  function updateProperty(fields) {
    var updateData = { ...data, ...fields };
    axios
      .put(baseurl + "propertybasicpropertydetailsupdate", updateData, {
        headers: {
          "Access-Control-Allow-Origin": "*"
        }
      })
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }


  return (
    <div className={classes.paper}>
      <Formik initialValues={initialValues} onSubmit={onSubmit}>
        {({ setFieldValue }) => {
          // eslint-disable-next-line
          const [property, setProperty] = useState({});
          // eslint-disable-next-line
          // eslint-disable-next-line
          useEffect(() => {
            if (!isAddMode) {
              const path = baseurl + "propertybasicpropertydetailsvalue";
              axios
                .post(path, data, {
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/json"
                  }
                })
                .then((res) => {
                  console.log(res.data);
                  const fields = [
                    "propertyName",
                  ];
                  fields.forEach((field) =>
                    setFieldValue(field, res.data[field], false)
                  );
                  setProperty(res.data);
                });
            }
          }, [setFieldValue]);

          return (
            <Form>
              <Grid container spacing={4}>
                <Grid item xs={12} sm={6}>
                  <Field
                    name="propertyName"
                    type="text"
                    as={TextField}
                    fullWidth
                    label="Property Name"
                    autoFocus
                    variant="outlined"
                    size="small"
                  />
                </Grid>
                <Button
                  type="submit"
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                >
                  Save and Continue
                </Button>
              </Grid>
            </Form>
          );
        }}
      </Formik>
    </div>
  );
}

export { App };

Shouldn't you also prevent default submit? – Stephan Kristyn Feb 03 '22 at 15:53 — Stephan Kristyn, Feb 03 '22 at 15:53

score 1 · Answer 1 · answered Mar 02 '23 at 09:40

You should avoid useState hook inside the formik, you get all the value inside the the onsubmit function with values property so as like something below

         <Formik
                    initialValues={ {
                        email: '',
                        password: '',
                    } }
                    validationSchema={ loginValidationSchema }
                    onSubmit={ async (values) => {
                        try {
                            const data = {
                                method: 'POST',
                                data: {
                                    ...values
                                }
                            }
                            const response = await AuthAPI('/login', data)
                            if (response.success) {
                                auth.login()
                                navigate('/dashboard')
                                toast.success('Sign in successfully', { autoClose: 5000 })
                            } else {
                                toast.error( 'Internal Server Error', { autoClose: 5000 })
                            }
                        } catch (error) {
                            toast.error('Internal Server Error', { autoClose: 5000 })
                        }
                    } }
                >
                    {({ values,
                        handleChange,
                        handleSubmit,
                    }) => (
                        <form className='w-full' onSubmit={ handleSubmit }>
Input tag and code here
                        </form>
            </Formik>

React formik Create and update form in single form issues

1 Answers1