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

Answer 1

您应该避免在formik中使用useState钩子，您可以在具有values属性的onsubmit函数中获得所有值，就像下面的东西一样

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