score:0
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);
}
score: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);
}
}}
Source: stackoverflow.com
Related Query
- ReactJS Formik, Why is the form not clearing?
- reactjs - Formik form does not fire submit on return key press
- Why getDerivedStateFromProps does not allow to re-render with the state update? Not a problem for componentWillReceiveProps - ReactJS
- Why is clearTimeout not clearing the timeout in this react component?
- Why is the child component updating but not re-render Reactjs
- Formik Field not clearing after form submit
- formik form validation not working reactjs
- ReactJS. - Why does this work in ReactJS and not the other way
- Why does the form not receive select data in AntD?
- Why does the state in ReactjS vs firebase data not match?
- Why is the DOM not reflecting my component state in my dynamic form
- Reactjs - Building form from data set, FormElement not returning to the render function
- Why does adding/removing curly braces in this arrow function cause the text to not display for a ReactJS component?
- Why are my notes not displayed/updated, even though reactjs received the data?
- why form not taking input in the input field in react
- Sumbit button also used as a navlink to route page, does not sumbt the form unless it is not used as a navlink in reactjs
- my form is not working. when i click on save button, my table is blank, without the field input.and my cancel button is not clearing the fields
- ReactJS form submit this.props.history.push('/downloads') not linking through to the new page
- Why function not passed as reference in the eventlistener in ReactJS
- Why I am not able to display the first 10 columns in this React Table - ReactJS
- Why does the twitter widget not re-render reactjs
- ReactJS - Why is the style of my input bar not changing based off of a setState?
- Dirt simple reactjs program - why is the data not displaying?
- Reactjs and rails implementation error on form 404 not found on the server side
- onSubmit handler not working and I can't submit/validate my Formik form in Reactjs
- ReactJS - As can I generate several form fields with value properties sharing the same names but not the same values?
- Why does calling react setState method not mutate the state immediately?
- Why is the `MouseEvent` in the checkbox event handler not generic?
- Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
- Why is `Promise.then` called twice in a React component but not the console.log?
More Query from same tag
- How to make React Component call a function on every state change?
- Color differences between threejs + vanilla js and react-three-fiber + create-react-app
- How to set the data from my API as initial state for my react component?
- How to access environment variables inside Gatsby build files that are served using gatsby-plugin-nodejs
- wrote a React code snippet to implement conditional rendering and am not able to update the state of {Left} and {Right}
- map is not a function its may be due to array
- How to update component based on container's state change
- How to add item to immutable array in React setState in Typescript?
- Can I create a windows exe from a react project
- Gatsby hybrid app - Issues with sub routing on a page which is built using a template in `createPage`
- React Hook useEffect has a missing dependency: 'fetchUser'. useEffect problem?
- How to move between components in React
- ReactJs: How to handle empty array with map function inside render method
- Map sibling thead & tbody elements in React
- undefined React JS variable
- React Hooks, rerender & keeping same state - how it works underhood?
- How/where to inject server communication into a Flux workflow?
- Unable to get swipe gesture work to pull out material-ui's Drawer component
- Bootstrapping data into webpack bundled javascript from html
- React for loop only runs once regardless of array size
- React-Native Upload Image with Fetch
- Meteor React group collection
- Wrap a JavaScript function reference
- clearing particular contents of a modal upon closing in react
- ejabberd get chat history of particular users
- Node.Js code returns [object Promise] when I try to send output data
- I get this error message when I try to test run my MySQL database
- How to apply CSS styles to content rendered after AJAX call
- Understanding a basic implementation of Redux | how is prevState used?
- In API call If I click Submit button open 200code Success page other wise open Error Page 404 In ReactJS