通过AJAX加载数据是一个很普遍的场景。在React组件中如何通过AJAX请求来加载数据呢?首先,AJAX请求的源URL应该通过props传入;其次,最好在componentDidMount函数中加载数据。加载成功,将数据存储在state中后,通过调用setState来触发渲染更新界面。

AJAX通常是一个异步请求,也就是说,即使componentDidMount函数调用完毕,数据也不会马上就获得,浏览器会在数据完全到达后才调用AJAX中所设定的回调函数,有时间差。因此可以使用 componentWillUnmount 来取消任何未完成的请求;

componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
}, componentWillUnmount: function() {
this.serverRequest.abort();
}

官网是这么解释的

When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted.

当异步加载数据的时候, 使用 componentWillUnmount 来取消任何未完成的请求 在组件卸载之前

componentWillUnmount()

在组件从 DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素

解决React通过ajax加载数据更新页面不加判断会报错的问题的更多相关文章

  1. 解决移动端rem加载瞬间页面错乱的方法(放大或者缩小)

    移动端布局有很多种,这里我们最常使用到rem+百分比的布局方式(高度/字体设置rem单位,宽度设置百分比)来处理屏幕兼容,这种方法在兼容上是比较不错的,可以使得字体以及整体适应各种大小的屏幕,可以解决 ...

  2. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

  3. 解决React首屏加载白屏的问题

    众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用 onreadystatechang ...

  4. Nginx加载新的模块,编译报错记录

    参考:https://www.cnblogs.com/Leechg/p/9969000.html ---------如下我的操作记录--------------- nginx -V查看当前nginx信 ...

  5. 样式加载不出来,浏览器控制台报错:Resource interpreted as Stylesheet but transferred with MIME type text/html

    写登录的时候出现的问题,样式时好时坏,浏览器控制台看到的信息是: Uncaught SyntaxError: Unexpected token <Resource interpreted as ...

  6. axios 异步加载 导致 {{}} 中变量为 undefined 报错 的 解决方案

    情景:axios 异步加载数据,当返回数据为一个 数组 时,双花括号中 这样写 会报错 {{informationDetail[0].img}} 解决方案一:通过 v-if 进行判断 解决方案二:单独 ...

  7. keras RAdam优化器使用教程, keras加载模型包含自定义优化器报错 如何解决?

    本文首发于个人博客https://kezunlin.me/post/c691f02b/,欢迎阅读最新内容! python keras RAdam tutorial and load custom op ...

  8. 将项目加载到tomcat中的时候报错:Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modules

    转自:http://jingwang0523.blog.163.com/blog/static/9090710320113294551497/ 最近在用eclipse做项目,新建项目时什么都贪新,用最 ...

  9. Python爬虫-05:Ajax加载的动态页面内容

    1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...

随机推荐

  1. TTS 文字转语音 ekho

    1.源码下载 使用svn客户端,执行如下命令下载 svn co https://svn.code.sf.net/p/e-guidedog/code/ 2.官方网站查看说明 http://www.egu ...

  2. Spark之UDF

    package big.data.analyse.udfudaf import org.apache.spark.sql.types.{IntegerType, StringType, StructF ...

  3. windows10 专业版的远程服务器管理工具下载

    一.安装远程服务器管理工具: 下载地址: https://www.microsoft.com/zh-cn/download/details.aspx?id=45520 二.关闭远程服务器管理工具: 1 ...

  4. java----堆区、方法区和栈区

    堆区:只存放类对象,线程共享: 方法区:又叫静态存储区,存放class文件和静态数据,线程共享; 栈区:存放方法局部变量,基本类型变量区.执行环境上下文.操作指令区,线程不共享; class A { ...

  5. spring4笔记----PropertyPlaceholderConfigurer 属性占位符配置器

    driverClassName=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/spring username=root password= ...

  6. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  7. 转:Redis 使用经验总结

    转自:Redis 总结精讲 看一篇成高手系统-4 本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点3.单线程的redis为什么这么快4.redis的数据类型,以及每种数据 ...

  8. malloc和calloc用法

    malloc和calloc用法 #include <stdio.h> #include <stdlib.h> int main(){ int n; printf("i ...

  9. 一个好看的php验证码源码

    <?php     $w = 80; //设置图片宽和高 $h = 26; $str = Array(); //用来存储随机码 $string = "ABCDEFGHIJKLMNOPQ ...

  10. LeetCode算法题-Binary Tree Paths(Java实现-3种解法)

    这是悦乐书的第199次更新,第206篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第62题(顺位题号是257).给定二叉树,返回所有根到叶路径.例如: 输入: 1 / \ ...