React setState to value received from http response

Question

First of all, please excuse me english, i am not a native speaker. I will try to explain my best.

I am trying to set the state of my component to a value received from http request that runs on componentDidMount(). After setState, i am passing props to my child components and expect them to rerender.

//App.js
import getAuthStateFromServer from './getAuthStateFromServer'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      AuthState
    }
    this.getAuthState.bind(this)
  }

  componentDidMount() {
    this.getAuthState()
  }

  getAuthState() {
     getAuthStateFromServer().then(AuthState => 
       this.setState({ AuthState })
     ) 
  }

   render() {
     return <h1>{this.state.AuthState.userData.userName}</h1>
   }
}


//getAuthStateFromServer.js

import axios from 'axios'
import { getAuth } from './AuthStorage' 

const getAuthStateFromServer = () => new Promise((resolve, reject) => {
   // Create AuthState object
   const AuthState = {
     userData: {},
     isLoggedIn: false,
   }
   // 1. get token
   const { token } = getAuth()
   // 2. if have token
   if(token) {
     // authenticate!
     // send get request with token in header
     axios.get('http://localhost:3500/validate', {
       headers: { 'Authorization': `Bearer ${token}` }
     }).then((res) => {
        AuthState.userData = res.data
        AuthState.isLoggedIn = true
        resolve(AuthState)
     }).catch(e => reject(e))
   }
   resolve(AuthState)
  })

 export default getAuthStateFromServer

So that got me the AuthState object when i console logged it but it did not rerender my component.

But if i take whats inside my getAuthFromServerFunction and put it in my componentDidMount like this..

componentDidMount() {
  this.getAuthState()
 }

 getAuthState() {
   const AuthState = {
     userData: {},
     isLoggedIn: false,
   }
   // 1. get token
   const { token } = getAuth()
   axios.get('http://localhost:3500/validate', {
      headers: { 'Authorization': `Bearer ${token}` },
   }).then((res) => {
     AuthState.userData = res.data
     AuthState.isLoggedIn = true
     this.setState({ AuthState })
   })
 }

It Works.. and my component rerenders

I am completely stumped trying to figure this out.. Any help would be greatly appreciated, thank you

In the first version of your code, you never call `setState`: getAuthState() { getAuthStateFromServer().then(AuthState => this.state({ AuthState }) ) } — sjahan, Jul 04 '18 at 13:14
i changed it, its still doesnt update my component. When i put console logs inside the render method, it shows that Authstate did get updated, but it doesnt update the dom — kevin janada, Jul 04 '18 at 13:18

score 1 · Accepted Answer · answered Jul 04 '18 at 13:22

I think your getAuthStateFromServer function is not good.

I can feel that it will always be resolved to the same value ;)

const getAuthStateFromServer = () => new Promise((resolve, reject) => {
   // Create AuthState object
   const AuthState = {
     userData: {},
     isLoggedIn: false,
   }
   // 1. get token
   const { token } = getAuth()
   // 2. if have token
   if(token) {
     // authenticate!
     // send get request with token in header
     axios.get('http://localhost:3500/validate', {
       headers: { 'Authorization': `Bearer ${token}` }
     }).then((res) => {
        AuthState.userData = res.data
        AuthState.isLoggedIn = true
        resolve(AuthState) // <-- When this line will be called, the promise will always be resolved by the line below.
     }).catch(e => reject(e))
   }
   resolve(AuthState) // <-- This line will always be called before the one with the value above. 
  })

Remove the last line resolve(AuthState), this breaks your promise! Look at my comments in the code above ;)

Thank you very much! you solved my problem!! I would upvote your answer but my reputation is still too low. sorry :( — kevin janada, Jul 04 '18 at 13:24
Mark it as the solution then, so that it can help the next guy with the same problem ;) Glad to have helped you! — sjahan, Jul 04 '18 at 13:25

React setState to value received from http response

1 Answers1