0

0

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

藏色散人

藏色散人

发布时间:2023-01-04 09:57:46

|

2806人浏览过

|

来源于php中文网

原创

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

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

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

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

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

问题描述:

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

  • 进行的尝试:在组件外定义了一个 getXXX 方法,使用 axios 请求后台的结果,在 Component 的构造方法里调用该方法,将该方法的结果赋值给 state 属性里

  • bug结果: 后台数据接收到了请求,并正确返回结果,但是页面却没有渲染,使用 console 输出 GetXXX 的结果,结果是正确的

    秘塔AI搜索
    秘塔AI搜索

    秘塔AI搜索,没有广告,直达结果

    下载
  • bug排查:已确定后台收到请求并返回正确结果,前端也输出正确结果,也就说明是页面渲染先于获取到数据,但是react组件的加载顺序是先构造方法,再去调用render。所以只可能是异步的问题

  • 分析: axios是一个异步请求,构造方法中调用这个方法,但是没有立刻获取到结果,所以 state 赋值的是一个 结果的成员变量,结果肯定是空,所以渲染的页面也无数据的

  • 进行的尝试: 在render方法里使用axios请求,获取到结果后使用setState方法将结果赋值给state。结果运行报错,因为会造成死循环,因为 setState 会更新页面,即调用render方法,在 render 方法里调用setState会造成死循环

  • 正确处理方:在构造方法里,调用getXXX方法,在getXXX方法里设置setState,这样页面会先进行渲染(数据结果为空),当getXXX的请求收到服务器的响应后,执行setState时,会重新触发页面渲染。因为请求响应的时间与服务器处理有关,当响应时间很短时,前端就看不见数据为空的结果,后台响应时间较长的情况,可以加一个 Antd 的加载组件 Spin,提示正在加载

推荐学习:《react视频教程

相关专题

更多
console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

412

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

501

2024.05.29

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号