• 技术文章 >web前端 >前端问答

    react有数据但渲染不上怎么办

    藏色散人藏色散人2023-01-04 09:58:02原创101

    react有数据但渲染不上的解决办法:1、在构造方法里,调用getXXX方法;2、在getXXX方法里设置setState;3、当getXXX的请求收到服务器的响应后,执行setState时,重新触发页面渲染即可。

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react有数据但渲染不上怎么办?

    react 获取后台数据渲染页面不显示

    问题描述:

    • 想要的结果:在一个 reactComponent 获取后台的数据并显示,页面第一次渲染时就显示

    • 进行的尝试:在组件外定义了一个 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视频教程

    以上就是react有数据但渲染不上怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React 渲染
    上一篇:react项目怎么改标题 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react关闭页面时间怎么设置• react怎么实现密码隐藏功能• 10 个编写更简洁React代码的实用小技巧• react项目安装失败怎么办• react获取不到页面元素怎么办
    1/1

    PHP中文网