score:0
Accepted answer
to put it simply, i would suggest
i suggest turning your handlesubmit
into this:
handlesubmit(event) {
event.preventdefault();
this.postuserinfo().then(()=>{
return this.getuserinfo();
}).then(()=>{
console.log("userinfo: " + this.state.usersinfo)
alert('username was submitted: ' + this.state.userinput);
this.setstate({
showinicio: !this.state.showinicio
});
});
}
and do this in your postuserinfo
and getuserinfo
methods:
postuserinfo(){
return fetch("http://localhost:8080/api/users", {
method: "post",
mode: "cors",
headers: {
"content-type": "application/json",
},
body: json.stringify({ username: this.state.userinput, bestattempts: 0, besttime: 0 })
})
.then((res) => res.json())
.then(data => {
console.log(data);
this.setstate({ dataposted: true });
})
.catch((error) => {
console.log(error);
})
}
getuserinfo() {
return fetch("http://localhost:8080/api/users", { mode: "cors" })
.then((res) => res.json())
.then(data => { //you had a syntax mistake here: (data
this.setstate({ usersinfo: data })
const _head = {
id: "id",
username: "username",
bestattempts: "best attempts",
besttime: "best time",
}
this.setstate({ head: _head })
})
}
there's no need to use async/await as the fetch api already uses promises.
the reason you were getting the weird error may have been because you were trying to preventdefault() inside of an async function.
is because preventdefault is being executed after the first await
thanks to bravo for clarifying.
Source: stackoverflow.com
Related Query
- How to use async await inside an event?
- How can I use an async function to await for an onClick() event (Choice between 2 Buttons in a Modal)
- How to use JavaScript await on user input in an async function
- how to properly use the async and await keywords within a map
- How to use Async Await in "onDrop" of "react-dropzone" ? (Parsing error: Can not use keyword 'await' outside an Async function)
- How to use async await with React componentDidMount() method?
- How to use Async / Await with React hooks?
- how yo use an async method inside useEffect() hook
- how to use async function with custom hooks inside useEffects
- How to use async await in React components without useEffect
- How do I use async await when a component leaves view
- How to use async / await in Chrome or Edge mobile browser?
- How to use async javascript inside react render
- How to use Async await without assigning to variable? to avoid value that never used
- How to use async await in React using the axios in the API call
- How to use setState inside render function without onClick event
- How to use useFormik hook with async await in onSubmit event?
- How to use the most updated state/value inside a 3rd party event handler?
- How to use useState inside a react functional component which is async
- how to use await inside then callback?
- How far up the call stack should I use await for an async function?
- how to capture the props value inside the event attribute function when use the map function on it
- How to use a material-ui Menu inside a mui-datatable on event handler
- How to use async await in React component
- How to use data of an Async function inside a functional component to render HTML in React
- how to use aync and await inside use effect of calling function?
- How to use async await with webpack and typescript in react?
- How can I use async / await functions?
- How to use switch statement inside a React component?
- Await is a reserved word error inside async function
More Query from same tag
- React: Batching state updates tied to event listeners
- Toggle icon not appearing on React-Accessible-Accordion
- React query how to handle a search
- How to add solid round dot in rechart
- React Starter Kit Reports Unexplained Missing Packages
- Child's styling to the bottom of itself within an overflowing parent element
- ReactJS - How to log the specific field that is causing a 400 error code when submitting form
- React pass prop as function then call it error
- Logging old user data on login after logout in react using JWT
- Material UI doesn't use overridden styles when using useTheme hook
- webpack-dev-server Cannot find module 'webpack'
- How to auto refresh data in real time, react?
- React Hook useEffect has a missing dependency: 'formData'. Either include it or remove the dependency array. what is dependency is use
- Update not wrapped in act(...) and the mock function not firing. react-testing-library, jest
- react parent component get Count of rendered elements from switch/route
- For loop inside map React.js
- React-router-dom goBack(), how to inherit prop from another js file?
- How to add Email exist validation to react js based on Api resonse
- Use MapBox GL JS with React - Error: Invalid type: ‘container’ must be a String or HTMLElement
- infinite loop when using useEffect with a required funcion
- React Hooks Error Handling Turns State To Function
- Invalid hook call. How can I call dispatch?
- How to call callback function after dispatch action Redux
- React.js: convert string to an object
- Custom hook: immutable useState to store functions and avoid infinite loop
- PHP-React Verify Cryptographic Signature
- Handle `<form>` completion via a callback
- React change selected item index of array using order number
- Gatsby: getImage returns undefined
- NextJS if statement wrapped a .map