Getting object promise instead of value - reactjs

Question

login(loginId, password) {
return axios
.post(API_URL + "login", {
loginId,
password
})
.then(response => {
console.log(response.data);
if (response.data) {
localStorage.setItem("token", JSON.stringify(response.data));
localStorage.setItem("user", this.getUser(loginId));
console.log(localstorage.getItem("user");
}
console.log(response.data);
return response.data;
});
}
getUser(loginId){
return axios
.get(API_URL+"user/search/"+loginId,{
headers: { Authorization: `Bearer ${authHeader()} ` },
});
getCurrentUser() {
return (JSON.parse(localStorage.getItem('user')));
}
}
class ViewMytweetComponent extends Component {
constructor(props) {
super(props)
this.onChangeReply = this.onChangeReply.bind(this);
this.state = {
Tweet: [],
reply: "",
user: AuthService.getCurrentUser()
}
this.deleteTweet = this.deleteTweet.bind(this);
}
componentDidMount() {
const { user } = this.state;
console.log(user);
var userId = user.loginId;
TweetDataService.getMyTweet(userId).then((res) => {
this.setState({ Tweet: res.data });
// console.log(this.state.Tweet);
});
}
}
In the login method I call the getUser method and store its return value to localStorage with the key user. The getCurrentUser method is used to return the stored user-item from the localStorage object.
Requesting the previously stored user in the componentDidMount method however fails. Logging the user object to the console produces:
[object Promise].
Does anyone know how to solve this?

Answer 1

since axios.get returns a promise, the getUser method is also returning a promise too. Which is an object, when you try to save it in localStorage in here:
localStorage.setItem("user", this.getUser(loginId));
JavaScript automaticaly converts it to a string, which becomes: [object Promise].
There are a few ways to solve this, for example:
login(loginId, password) {
return axios
.post(API_URL + "login", {
loginId,
password
})
.then(response => {
console.log(response.data);
if (response.data) {
// store the result instead of the promise itself,
// also stringify the result before javascript creates a meaningless string itself.
this.getUser(loginId).then((user)=>localStorage.setItem("user", JSON.stringify(user))
localStorage.setItem("token", JSON.stringify(response.data));
console.log(response.data);
return response.data;
})
}
Of course nested thens aren't exactly a good practice, so maybe it would be nice to rethink class' overal data fetching logic.