How do I properly call multiple functions in componentDidMount? - reactjs

Question

I am trying to call two different functions to display data on my page and one is working (getUserscards) and the second one is not (getUserInfo). I saw that you can put two different function calls for the data in componentDidMount and I have tried doing it several ways but the data for the email and names is not showing up. I will include the code from my profilepage where the componentDidMount is and from my api page where the function is made.
Here is my code in profilepage. js:
import React from 'react'
import { getUsersCards, getUsersInfo } from '../Api'
class ProfilePage extends React.Component {
constructor () {
super()
this.state = {
token: window.localStorage.getItem('login_auth_token'),
username: localStorage.getItem('login_username') || '',
email: '',
first_name: '',
last_name: '',
cards: []
}
}
componentDidMount () {
if (this.state.token) {
getUsersCards(this.state.token)
.then(cards => this.setState({ cards: cards }))
}
getUsersInfo(this.state.email, this.state.first_name, this.state.last_name)
.then(data => this.setState({ data: data }))
}
componentDidUpdate (prevProps, prevState) {
if (this.state.token && this.state.token !== prevState.token) {
getUsersCards(this.state.token).then(cards => this.setState({ cards: cards }))
}
}
render () {
return (
<div>
<div className='container2'>
<div>
<p>Username: {this.state.username}</p>
</div>
<div>
Email: {this.state.email}
</div>
<div>
<p>Name: {this.state.first_name}{this.state.last_name}</p>
</div>
</div>
<div>
{this.state.cards.map(card => <p className='container' key={card.id}> Title: {card.card_name} <br /> Card: {card.card_text}</p>)}
</div>
</div>
)
}
}
export default ProfilePage
And here is the function from my api.js page:
export function getUsersInfo (token) {
return request.get('/users/info', {
headers: {
Authorization: `Token ${token}`
}
}).then(res => {
console.log(res.data)
return res.data
})
}

Answer 1

The thing is, when you call this.setState({ data: data }), in your state MUST HAVE a key data.
Maybe change into this may help
this.setState({ email: data.email, first_name: data.first_name, last_name: data.last_name })
Just need the exactly key to work

Answer 2

the problem is likely here,
export function getUsersInfo (token) {
return request.get('/users/info', {
headers: {
Authorization: `Token ${token}`
}
}).then(res => {
console.log(res.data)
return res.data //!! note
})
}
You are returning raw data from the server when are you parsing it to json, YOu Must parse it somehow to make is object so you can use.