ReactJS Formik, Why is the form not clearing? - reactjs

Question

I have Form
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>
);
And data send ok. But the form doesn't clear. Why??
I also try this:
TextForm.setFieldValue('text', '');
But this doesn`t work too.

Answer 1

Check that the following function call is not throwing an exception:
Request('POST', {"text":values.text});
If an exception is being thrown from Request(..), then the subsequent call to resetForm(..) and setSubmitting(..) will be skipped which would be the reason for the problem you're experiencing.
Also, some improvements you might consider would be to make the following changes to your onSubmit handler:
/* 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 helped 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);
}