[英]React setState dynamically - how to setState property and value from props
[英]React setState to value received from http response
首先,请原谅我英语,我不是母语人士。 我将尽力解释我的最佳状态。
我试图将组件的状态设置为从在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
因此,当我通过控制台记录它时,便获得了AuthState对象,但它没有重新呈现我的组件。
但是,如果我将getAuthFromServerFunction中的内容放入其中,然后像这样将其放入我的componentDidMount中。
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 })
})
}
它有效..和我的组件rerender
我完全无法解决这个问题。.任何帮助将不胜感激,谢谢
我认为您的getAuthStateFromServer
函数不好。
我可以感觉到它将始终被解析为相同的值;)
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.
})
删除最后一行resolve(AuthState)
,这违反了您的承诺! 看看我在上面的代码中的注释;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.