【React采坑之旅】render返回视图模板，但是数据是异步从后台获取的，执行render时正确的数据并没传递给模版，如何解决？

徐行莫停

于 2018-05-27 19:36:55 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react异步渲染数据

本文链接：https://blog.youkuaiyun.com/qq_35765126/article/details/80471773

本文探讨了在React中遇到的问题：当数据异步获取时，render方法可能在数据未准备好时就被调用，导致视图无法正确显示。通过理解React的state更新机制，可以利用state变化触发render钩子来解决这个问题。示例代码展示了如何在数据加载完成后更新state，从而确保模板接收到正确数据并渲染到页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要知道render钩子是在state改变之后就会调用，利用这个特性可以达到异步获取的数据渲染模版，呈现在页面上

demo：

constructor(){
    this.state={
            haveData:false,  //默认是没有获取到数据
     };
     axios.get(this.state.url+'mock/swipe/index.json')
        .then(res => {
            let data=JSON.parse(res.request.response);
            Object.keys(data).map((value,index) => {
                this.universalLink.push(data[value]);
            });
            this.<