react.js解决 render 比 componentWillMount 先执行完毕问题
react.js解决 render 比 componentWillMount 先执行完毕问题
componentWillMount异步调用导致函数未执行完毕,render()已渲染完毕,出现undefined参数
刚开始使用 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 (
)
}
可以看到控制台打印信息:
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
isLoading…
}
return (
)
}
PS.转载自 lee_xiumei(侵删)
- React小工程——map方法 花店(getInitialState,componentWillMount,render)
- 解决submit提交的时候,先执行本地js代码的问题
- Easyui添加tab时以href形式载入页面 未执行js脚本问题解决
- 通过二次加载脚本,解决Ajax加载的页面中JS脚本不执行问题
- 利用Immutable解决React-Native那些因为对象被篡改导致的多次render问题
- 解决用jquery load加载页面到div时,不执行页面js的问题
- 解决:Angular-cli:执行ng-build --prod后,dist文件里无js文件、文件未压缩等问题
- 两个js文件同时执行,解决覆盖问题
- Js点击事件执行多次问题解决
- 解决js赋值时需要添加alert方法赋值才成功否则赋值语句不执行问题
- 导航菜单滑动效果+解决两个js的执行顺序问题
- There is an internal error in the React performance measurement code.Did not expect componentDidMount timer to start while render timer is still in progress for another instance
- 火狐不执行js的一些解决办法及火狐对js的兼容问题
- Selenium Webdriver 的使用java执行js代码 解决 ScriptEngine不支持浏览器内置对象window,document的问题
- vue.js element-ui validate中代码不执行问题解决方法
- puppeteer学习笔记(八)--API问题解决--使用 ” evaluate “函数执行自定义js脚本
- React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法
- 火狐不执行js的一些解决办法及火狐对js的兼容问题
- 解决不能执行已释放的js脚本问题
- 安卓解决WebView中无法执行js的问题