【发布时间】:2017-07-05 05:07:38
【问题描述】:
我正在尝试在 componentDidMount 中获取数据、设置状态和更改路由,但无法完成(仅在单击屏幕后)。我想这与 fetch 的异步性质有关,但如何解决?
componentDidMount(){
AsyncStorage.multiGet([USER_TOKEN, USER_REFRESH_TOKEN,USER_REMEMBERED]).then((data) => {
const userRemembered = JSON.parse(data[2][1])
const userAccessToken = data[0][1]
const userRefreshToken = data[1][1]
if (userRemembered) {
fetch("SOME_URL", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
refreshToken: userRefreshToken
})
})
.then(response => response.json())
.then(responseData => {
console.log(responseData); // only after clicking on the screen it is logged
if (responseData.success) {
AsyncStorage.multiSet([[USER_TOKEN,responseData.response.accessToken],[USER_REFRESH_TOKEN,responseData.response.refreshToken],[USER_REMEMBERED,JSON.stringify(true)]])
this.setState({
token:responseData.response.accessToken,
refreshToken: responseData.response.refreshToken,
isLoggedIn: true
}) //only after clicking on the screen state is changed
this.changeRoute(this.state) //only after clicking on the clicking on the screen route is changed
}
else {
console.log("API is not responding");
}
})
.catch((error) => {
console.log(error)
})
}
else{
console.log('user has not checked Remember Me');
}
})
}
【问题讨论】:
-
为了在更新后立即反映状态的变化,您应该在
componentDidUpdate()中使用 -
您的控件是否会转到 componentDidMount?如果是,则 fetch 无法正常工作?
-
@JigarShah 也许我没有正确理解你。您是否建议在
componentDidUpdate ()中更改路线? -
@VikramSaini 承诺有效。在第二个
.then()之后没有任何效果。如果我点击屏幕上的某个地方,它会起作用,状态会更新,路线也会改变,但页面加载时不起作用,很奇怪。 -
是的,所有动作都应该放在
componentDidUpdate,一旦你设置了状态,它就会反映你放置的位置。
标签: javascript reactjs asynchronous react-native fetch