Cant Save Post Request Body Data - reactjs

Question

I am having trouble saving the data from a fetch post request using Node.js and React.js. I am calling the fetch request from a function inside a React component class. I want to query some userid from my database then save it to one of the React component instance variables ie "this.userid" however, whenever I assign the value to one of the empty variables I check it outside of the ".then" statements you can see it was never assigned.
Does anyone know of a run around or the proper way to perform the fetch request? I am creating a simple login post request and want to save the userid once its returned from the API.
class LandingPage extends React.Component {
constructor(props) {
super(props)
this.data = data
}
login(e){
var that = this;
function log(id){
that.userid = id
}
fetch("/login", {
method: "POST",
headers: {
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
},
body: JSON.stringify(this.data)
}).then(response => {
return response.json();
})
.then(json =>log(json.userid))
/both show undefined
console.log(that.userid, this.userid)
}

Answer 1

You are checking the data outside of the then scope. It doesn't exist there, so you will have to call setState with the retrieved data inside the .then().
change
.then(json =>log(json.userid))
to
.then(json => {
that.setState({userid: json.userid})
})
then, after the component updated, the state with userid is available
Update: alternatively, you can use async await and build it like this:
import React from 'react';
class MyComponent extends React.Component {
state = {
userId: null
}
useFetch = async e => {
const raw = await fetch("/login", {
method: "POST",
headers: {
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.data)
});
const json = await raw.json();
this.setState({
userId:json
}, () => console.log(this.state))
}
render() {
if (this.state.userId === null)
this.useFetch();
return (
<div>Loading some data</div>
)
}
}
export default MyComponent;
tested and working component.