react 在 componentWillMount() 中调用异步函数时，componentWillMount() finishes after render()
Posted on 2017-12-13 19:07 lee_xiumei 阅读(3678) 评论(1) 编辑 收藏 举报刚开始使用 react，很多属性、方法不是很熟。在此记录下我所遇到的问题及解决方法。
我在 componentWillMount() 中调用了一个异步函数，在返回结果中调用 this.setState() 来保存数据，在 render() 中使用 this.state.article 时，显示为 undefined。代码如下：
componentWillMount() {
console.log('componentWillMount called')
let _ = this
// 获取当前文章 ID；
let postID = utils.getID(ARTICLE)
/**
* @description 获取、渲染文章内容
* @param {Number} postID - 当前文章 ID
*/
postIO.getDetail(postID).then(res => {
if (res.status === 200) {
console.log('asynchronous called')
let data = res.data
_.setState({
article: {...data},
})
}
})
}
render() {
console.log('render called')
return (
<div></div>
)
}
可以看到控制台打印信息：
componentWillMount called
render called
asynchronous called
render called
这里可以得出：调用完 componentWillMount() 后，执行 render()，这时 componentWillMount 中的回调函数也执行完毕，更新数据后再次调用 render。
这个问题原因：首先，异步函数本身就是不会等前一个任务结束后再执行后一个函数，而是在执行其回调函数的同时就开始执行后一个函数了。因此，在调用完 componentWillMount 函数后，执行 postIO.getDetail(postID).then(res => {})，同时执行 render()。
可能导致的问题：在 componentWillMount 中的回调函数中调用 this.setState({article: {...data}})，第一次调用 render 时，是获取不到 this.state.article 的值的，这样就会引起报错。
解决方法：
增加一个加载状态，默认为 false，调用 componentWillMount() 时，设置为 true，当这个加载状态是 true 时，暂不渲染，当回调函数执行完毕后，设置为 false，此时再调用 render()；
完整代码如下：
constructor(props) {
super(props)
this.state = {
article: {},
isLoading: false,
}
}
componentWillMount() {
let _ = this
// 获取当前文章 ID；
let postID = utils.getID(ARTICLE)
_.setState({isLoading: true})
/**
* @description 获取、渲染文章内容
* @param {Number} postID - 当前文章 ID
*/
postIO.getDetail(postID).then(res => {
if (res.status === 200) {
console.log('asynchronous called')
let data = res.data
_.setState({
article: {...data},
isLoading: false
})
}
})
}
render() {
let {isLoading} = this.state
if (isLoading) {
return <p>isLoading...</p>
}
return (
<div></div>
)
}
