初学React,setState后获取到的thisstate没变,还是初始state?

问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?
描述:

 

          getInitialState(){return {data:[]};},componentDidMount(){var data = [ { author: "Pete Hunt", text: "This is one comment" },{ author: "Jordan Walke", text: "This is *another* comment" } ];(function(data){this.setState({data:data});console.log(this.state.data);}).call(this,data);},

为什么log里打出来的data是[]呢?

this.setState 是在 render 时, state 才会改变调用的, 也就是说, setState 是异步的. 组件在还没有渲染之前, this.setState 还没有被调用.这么做的目的是为了提升性能, 在批量执行 State 转变时让 DOM 渲染更快.

另外, setState 函数还可以将一个回调函数作为参数, 当 setState 执行完并且组件重新渲染之后. 这个回调函数会执行, 因此如果你想查看通过 setState 改变后的 state, 可以这样写:

this.setState({myState: nextState}, ()=>{console.log(this.state.myState)})

解决方案1:

React 的 setState 是异步执行的,所以你后面立即 console 是还没改变状态, setState 函数接受两个参数,一个是一个对象,就是设置的状态,还有一个是一个回调函数,就是设置状态成功之后执行的,你可以这样:

(function(data){var that = this;this.setState({data:data}, function () {console.log(that.state.data);});
}).call(this,data);

 

解决方案2:

不能立即 console.log(this.state.data);的,你可以在 render方法里取

解决方案3:

善用官方文档:

void setState(function|object nextState,[function callback]
)

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

所以正确做法是

this.setState(Object.assign({}, { data }),() => console.log(this.state)
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sizeof(数组名)和sizeof(指针)

转载:http://blog.csdn.net/kangroger/article/details/20653255 在做这道题时: 32位环境下,int *pnew int[10];请问sizeof(p)的值为() A、4 B、10 C、40 D、8 我以为正确答…

工作中的问题

今天写一专题页面&#xff0c;写出的结果在各个浏览器下都不同&#xff0c;心情不好。。。 就是红线的地方老对不齐。。。 在朋友指导下改了下样式好了 右边代码结构 1 <div class"fr Img"> 2 <h3>相关专题</h3> 3 <a href"#"…

数组的sizeof

转载&#xff1a;http://blog.163.com/chen_xinghuan/blog/static/17220158220112182838196/ 数组的sizeof值等于数组所占用的内存字节数&#xff0c;如&#xff1a;   char a1[] “abc”;   int a2[3];   sizeof( a1 ); // 结果为4&#xff0c;字符 末尾还存在一个…

数据结构行编辑成簇 c语言,索引的数据结构及底层存储

索引是帮助数据库高效获取数据的数据结构索引的数据结构1.hash表a.利用hash存储的话需要将所有的数据文件添加到内存&#xff0c;比较耗费内存空间b.hash表存储的是无序数据&#xff0c;范围查找的时候需要挨个进行遍历&#xff0c;比较耗费时间。2.二叉树二叉树规定左子树必须…

卓同学的 Swift 面试题

我觉得应该掌握的知识点&#xff0c;没有实际意义。 class 和 struct 的区别不通过继承&#xff0c;代码复用&#xff08;共享&#xff09;的方式有哪些Set 独有的方法有哪些&#xff1f;实现一个 min 函数&#xff0c;返回两个元素较小的元素map、filter、reduce 的作用map 与…

使用CImage双缓冲

一普通显示&#xff1a;现在的VC显示图片非常方便&#xff0c;远不是VC6.0那个年代的技术可比&#xff0c;而且支持多种格式的如JPG&#xff0c;PNG。 CImage _img; 初始化&#xff1a; _img.Load(L"map.png"); 显示&#xff1a;OnPaint事件中 CRect rect; this…

汇编语言学习系列 for循环实现

假如汇编语言要实现如下C语言的功能&#xff0c;编译环境Ubuntu14.04&#xff08;32位&#xff09;。 #include<stdio.h> int fact_for(int n) {int i;int result 1;for(i 2; i < n; i)result * i;return result; }int main(){printf("%d\n", fact_for(3)…

川大锦城c语言期末考试答案,四川大学《计算机组成原理》2018期末考试B卷答案及评分标准.doc...

四川大学期末考试试题(闭卷)答案及评分标准(2017——2018学年第 2 学期) B卷课程号&#xff1a;304036030 课程名称&#xff1a;计算机组成原理填空题(本大题共15空&#xff0c;每空2分&#xff0c;共30分)在评价计算机性能时用 响应时间 表示计算机完成某任务所需时间;用 吞吐…

2014届华为校园招聘机试题2

第一题、输入一个正整数&#xff0c;并编码为字符串进行输出 描述: 1、输入一个正整数&#xff0c;并编码为字符串进行输出。 编码规则为&#xff1a;数字0-9分别编码为字符a-j 2、输入肯定是正整数&#xff0c;不用做错误较验 运行时间限制: 无限制 内存限制: 无限制 输…

图解phpstorm常用快捷键

查询快捷键 CTRLN 查找类 CTRLSHIFTN 全局搜索文件 ,优先文件名匹配的文件 CTRLSHIFTALTN 查找php类名/变量名 ,js方法名/变量名, css 选择器 CIRLB 找变量的来源&#xff0c;跳到变量申明处 (CTRL 鼠标单击 也可以) CTRLALTB 找到继承该接口或者父级 的所有子类, 统计所有子类…

The C Programming Language--可变参数的函数

函数 printf的正确声明形式为&#xff1a;int printf(char *fmt, ...) void va_start (va list ap, last-required) type va_arg (va list ap, type) void va_end (va list ap) 其中&#xff0c;省略号表示参数表中参数的数量和类型是可变的。 va_list 类型用于声明一个变量&am…

二分查找法的循环与递归实现及时间复杂度分析

转载&#xff1a;http://baike.baidu.com/link?url3aEK-qcVbYi6ioJOsf-dFmvFQ6WQgzTwnE9JkmlHBc88qk-D00SambfrSl3hVh_UyqyxF8QEUosfq20IQQW5z_ 和http://hi.baidu.com/networkor/item/80d817f8331d8e08a7298834 设数组为整数数组&#xff0c;从小到大排序。二分法强调一定是…

cifar10 c语言,Python3读取深度学习CIFAR-10数据集出现的若干问题解决

今天在看网上的视频学习深度学习的时候&#xff0c;用到了CIFAR-10数据集。当我兴高采烈的运行代码时&#xff0c;却发现了一些错误&#xff1a;# -*- coding: utf-8 -*-import pickle as pimport numpy as np import os def load_CIFAR_batch(filename): """ 载…

Java程序性能优化

一、避免在循环条件中使用复杂表达式 在不做编译优化的情况下&#xff0c;在循环中&#xff0c;循环条件会被反复计算&#xff0c;如果不使用复杂表达式&#xff0c;而使循环条件值不变的话&#xff0c;程序将会运行的更快。 例子&#xff1a; import java.util.vector; class …

asp.net表单提交方法:GET\POST介绍

表单form的提交有两种方式&#xff0c;一种是get的方法&#xff0c;一种是post 的方法&#xff0c;如果没有特殊指定&#xff0c;默认为post。看下面代码,理解ASP.NET Get和Post两种提交的区别: 1.< form id"form1" method"get" runat"server"…

各种排序算法总结

转载&#xff1a;http://blog.csdn.net/warringah1/article/details/8951220 明天就要去参加阿里巴巴的实习生笔试了&#xff0c;虽然没想着能进去&#xff0c;但是态度还是要端正的&#xff0c;也没什么可以准备的&#xff0c;复习复习排序吧。 1 插入排序 void InsertSort(in…

CentOS7 上安装 Zookeeper-3.4.9 服务

在 CentOS7 上安装 zookeeper-3.4.9 服务1、创建 /usr/local/services/zookeeper 文件夹&#xff1a; mkdir -p /usr/local/services/zookeeper 2、进入到 /usr/local/services/zookeeper 目录中&#xff1a; cd /usr/local/services/zookeeper 3、下载 zookeeper-3.4.9.…

c语言在程序中显示现在星期几,C语言程序设计: 输入年月日 然后输出是星期几...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include main(){int year,month,day0,a,b,week,c,i,sum0,days,d;printf("please input year,month,days\n");scanf("%d,%d,%d",&year,&month,&days);for(i1;i{if (year%40){if(year%1000){if (ye…

static之用法

本文转载于http://www.cnblogs.com/stoneJin/archive/2011/09/21/2183313.html 在C语言中&#xff0c;static的字面意思很容易把我们导入歧途&#xff0c;其实它的作用有三条。 &#xff08;1&#xff09;先来介绍它的第一条也是最重要的一条&#xff1a;隐藏。 当我们同时编译…

HTTP响应报文与工作原理详解

HTTP 是一种请求/响应式的协议&#xff0c;即一个客户端与服务器建立连接后&#xff0c;向服务器发送一个请求;服务器接到请求后&#xff0c;给予相应的响应信息。 超文本传输协议(Hypertext Transfer Protocol&#xff0c;简称HTTP)是应用层协议。HTTP 是一种请求/响应式的协议…