本篇内容主要讲解“react有数据但渲染不上如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react有数据但渲染不上如何解决”吧!
react有数据但渲染不上的解决办法:1、在构造方法里,调用getXXX方法;2、在getXXX方法里设置setState;3、当getXXX的请求收到服务器的响应后,执行setState时,重新触发页面渲染即可。
react 获取后台数据渲染页面不显示
问题描述:
想要的结果:在一个
react
的Component
获取后台的数据并显示,页面第一次渲染时就显示进行的尝试:在组件外定义了一个
getXXX
方法,使用axios
请求后台的结果,在Component
的构造方法里调用该方法,将该方法的结果赋值给state
属性里bug结果: 后台数据接收到了请求,并正确返回结果,但是页面却没有渲染,使用
console
输出GetXXX
的结果,结果是正确的bug排查:已确定后台收到请求并返回正确结果,前端也输出正确结果,也就说明是页面渲染先于获取到数据,但是
react
组件的加载顺序是先构造方法,再去调用render
。所以只可能是异步的问题分析:
axios
是一个异步请求,构造方法中调用这个方法,但是没有立刻获取到结果,所以state
赋值的是一个 结果的成员变量,结果肯定是空,所以渲染的页面也无数据的进行的尝试: 在
render
方法里使用axios
请求,获取到结果后使用setState
方法将结果赋值给state
。结果运行报错,因为会造成死循环,因为setState
会更新页面,即调用render
方法,在render
方法里调用setState
会造成死循环正确处理方:在构造方法里,调用
getXXX
方法,在getXXX
方法里设置setState
,这样页面会先进行渲染(数据结果为空),当getXXX
的请求收到服务器的响应后,执行setState
时,会重新触发页面渲染。因为请求响应的时间与服务器处理有关,当响应时间很短时,前端就看不见数据为空的结果,后台响应时间较长的情况,可以加一个Antd
的加载组件Spin
,提示正在加载。
到此,相信大家对“react有数据但渲染不上如何解决”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!