Javascript 对从http响应接收到的值进行React setState

首先，请原谅我说英语，我不是以英语为母语的人。 我会尽力解释我最好的

我正在尝试将组件的状态设置为从在componentDidMount（）上运行的http请求接收的值。在setState之后，我将道具传递给我的子组件，并期望它们重新播放

//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

它起作用了。。和我的组件重装机

我想弄明白这件事，真是左右为难。。

---

非常感谢您提供的任何帮助，谢谢

我认为您的

getAuthStateFromServer

功能不好

我能感觉到它总是被解析为相同的值；）

const getAuthStateFromServer=（）=>新承诺（（解析，拒绝）=>{
//创建AuthState对象
常数AuthState={
用户数据：{}，
伊斯洛格丁：错，
}
//1.领取代币
const{token}=getAuth（）
//2.如果有代币
如果（令牌）{
//验证！
//发送头中带有令牌的get请求
axios.get（）http://localhost:3500/validate', {
标头：{'Authorization'：'Bearer${token}}}
})。然后（（res）=>{
AuthState.userData=res.data
AuthState.isLoggedIn=true
解析（AuthState）//拒绝（e））
}
解析（AuthState）//在代码的第一个版本中，您从未调用过
setState
：getAuthState（）{getAuthStateFromServer（）。然后（AuthState=>this.state（{AuthState}））}尝试在getAuthState（）中使用“setState”对于Appi，它仍然没有更新我的组件。当我将控制台日志放在render方法中时，它表明Authstate确实得到了更新，但它没有更新DOM。非常感谢！你解决了我的问题！！我会更新你的答案，但我的声誉仍然太低。抱歉：（将它标记为解决方案，这样它就可以帮助下一个有同样问题的人；）很高兴帮助了你！
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 })
   })
 }

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. 
  })