ReactJS Formik，为什么表单没有清空

Question

我有表单

const TextForm = props => (
<Formik
initialValues = {{
text: '',
target: props.target
}}
onSubmit = {(values, { setSubmitting, resetForm }) => {
if (values.target == 'add') {
Request('POST', {"text":values.text});
resetForm({"text":""});
setSubmitting(false);
}
}}
>
{({
handleChange,
handleSubmit,
values,
}) => (
<form onSubmit={handleSubmit}>
<input type="hidden" name="target"/>
<textarea className={styles.text} value={values.text} name="text" onChange={handleChange}></textarea><br/>
<button type="submit">
Submit
</button>
</form>
)}
</Formik>
);

数据发送正常。但表格不清楚。为什么？

我也试着这样做：TextForm.setFieldValue('text'，''(；但这也不起作用。

Answer 1

检查以下函数调用是否未引发异常：

Request('POST', {"text":values.text});

如果从Request(..)引发异常，则将跳过对resetForm(..)和setSubmitting(..)的后续调用，这将是您遇到问题的原因。

此外，您可能会考虑对onSubmit处理程序进行以下更改：

/* Define onSubmit callback as async */
onSubmit = { async (values, { setSubmitting, resetForm }) => {
try {
if(values.target == 'add') {
/*
If request is async or returns a promise, wait
for it before resetting form 
*/
await Request('POST', {"text":values.text});
resetForm({"text":""});
}
}
/*
If you want to handle errors here, do so with a 
catch block like so:
catch(err) {
handleErrorHereIfYouChose(err);
}
*/
finally {
/* 
Always ensure form submit state is reset, even if
unhandled is exception thrown 
*/
setSubmitting(false);
}
}}

Answer 2

Me帮助的values.text=''；

onSubmit = {async (values, { setSubmitting, resetForm }) => {
try {
if (values.target == 'add') {
await fetch('http://localhost:3000/notes', {
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
body: JSON.stringify({"text":values.text}),
});
values.text = '';
}
}
finally {
setSubmitting(false);
}