返回顶部
首页 > 资讯 > 精选 >react有数据但渲染不上如何解决
  • 207
分享到

react有数据但渲染不上如何解决

2023-07-04 22:07:06 207人浏览 泡泡鱼
摘要

本篇内容主要讲解“React有数据但渲染不上如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react有数据但渲染不上如何解决”吧!react有数据但渲染不上的解决办法:1、在构造方法里,

本篇内容主要讲解“React有数据但渲染不上如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react有数据但渲染不上如何解决”吧!

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

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有数据但渲染不上如何解决”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: react有数据但渲染不上如何解决

本文链接: https://www.lsjlt.com/news/347885.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react有数据但渲染不上如何解决
    本篇内容主要讲解“react有数据但渲染不上如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react有数据但渲染不上如何解决”吧!react有数据但渲染不上的解决办法:1、在构造方法里,...
    99+
    2023-07-04
  • react有数据但渲染不上怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react有数据但渲染不上怎么办?react 获取后台数据渲染页面不显示问题描述:想要的结果:在一个 react 的 Component 获取后台的数据并...
    99+
    2023-05-14
    React 渲染
  • react异步渲染问题如何解决
    在React中,异步渲染通常可以通过以下方式解决:1. 使用React.lazy和Suspense:React.lazy函数允许您在...
    99+
    2023-09-04
    react
  • react如何让子组件不渲染
    本篇内容主要讲解“react如何让子组件不渲染”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react如何让子组件不渲染”吧!react让子组件不渲染的方法:1、通过“shouldCompone...
    99+
    2023-07-04
  • echarts渲染不出来如何解决
    如果ECharts无法正确渲染,有几个常见的解决方法:1. 检查引入的ECharts库是否正确:确保正确引入ECharts库,包括E...
    99+
    2023-09-29
    echarts
  • 如何解决uniapp拿到数据不渲染页面问题
    在移动端应用开发中,uniapp以其跨平台特性和高效开发方式,越来越受到广大开发者的关注和青睐。但是,在使用uniapp开发应用时,有时候我们会遇到拿到数据但是无法渲染页面的情况。下面就让我们一起来看看这种情况的解决方法。一、检查数据格式u...
    99+
    2023-05-14
  • react中usestate改变值不渲染怎么解决
    这篇文章主要介绍“react中usestate改变值不渲染怎么解决”,在日常操作中,相信很多人在react中usestate改变值不渲染怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,...
    99+
    2024-04-02
  • react中useState改变值不渲染的解决方式
    目录react中useState改变值不渲染解决的办法react踩坑 useState的两次渲染检测意外的副作用react中useState改变值不渲染 React中默认浅监听,当S...
    99+
    2022-12-03
    react useState useState改变值不渲染 useState不渲染
  • vue修改数据页面不重新渲染问题如何解决
    本文小编为大家详细介绍“vue修改数据页面不重新渲染问题如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue修改数据页面不重新渲染问题如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue渲染机制...
    99+
    2023-07-05
  • React如何使用axios请求数据并把数据渲染到组件
    目录一、安装boostrap、axios二、在src目录下新建一个List.js,在List.js中三、在app.js中引入List.js并渲染四、在create-react-app...
    99+
    2022-11-13
    React使用axios React axios请求数据 React 请求数据并渲染
  • 如何解决vue数据渲染出现闪烁的问题
    这篇文章主要介绍了如何解决vue数据渲染出现闪烁的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在使用vue进行数据渲染的时候发现当我不...
    99+
    2024-04-02
  • 解决vue修改数据页面不重新渲染问题
    目录vue渲染机制和如何解决数据修改页面不刷新问题的多种方法vue渲染机制和如何解决数据修改页面不刷新问题的多种方法 本文不讲原理,只讲干货易懂易学 首先 第一点,vue底层是 将d...
    99+
    2023-03-24
    vue修改数据页面 修改页面不重新渲染
  • React性能优化之非必要的渲染问题如何解决
    这篇“React性能优化之非必要的渲染问题如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“React性能优化之非必要的...
    99+
    2023-07-02
  • word表格文字上面有空白但上不去如何解决
    本篇内容介绍了“word表格文字上面有空白但上不去如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先打开word,然后点击左上角的新...
    99+
    2023-07-02
  • 如何解决v-html渲染组件问题
    这篇文章主要介绍如何解决v-html渲染组件问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!由于前面对html进行过解析,今天想用vue拖拽,实现一手类似快站那种自动生成代码,结果就遇到了拖拽组件过去怎么无法解析的...
    99+
    2023-06-15
  • 如何解决vue数组和对象渲染的问题
    这篇文章给大家分享的是有关如何解决vue数组和对象渲染的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。数组更新检测在 vue 中使用数组的push()、pop()、shift...
    99+
    2024-04-02
  • 解决vue组件渲染没更新数据问题
    目录问题:现象:原因解决步骤问题: 使用前端日期控件时 - 数据联动时数据绑定无效问题 现象: 选择A日期,想动态改变B日期数据,只有第一次选择时会动态改变B日期数据,第二次选择A日...
    99+
    2023-02-09
    vue组件渲染没更新 vue组件渲染
  • vue数据渲染成功仍报错怎么解决
    这篇文章主要讲解了“vue数据渲染成功仍报错怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue数据渲染成功仍报错怎么解决”吧!data函数如下 export d...
    99+
    2023-07-04
  • 如何渲染layui框架table数据表格
    这篇文章主要为大家展示了“如何渲染layui框架table数据表格”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何渲染layui框架table数据表格”这篇文...
    99+
    2024-04-02
  • 如何解决vue2.x中数据渲染以及vuex缓存的问题
    这篇文章主要介绍如何解决vue2.x中数据渲染以及vuex缓存的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作