reactjs - React formik 在单一表单问题中创建和更新表单

Question

我正在使用我在单个组件中创建的创建表单和更新表单的 React formik。基于 One id 的更新如果更新意味着页面上的 id 将在 post 方法中发送并获取数据数据库，并且数据显示在输入字段中并且更新也可以正常工作。但是在渲染组件中很慢并且会导致很多错误，我希望 useEffect 将在渲染功能之外，并且在键入显示后该字段工作会稍有延迟

任何想法和任何更好的方法谢谢你的帮助

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 };