setState()之后使用state的问题
一开始知道setState()
是异步执行方法,在使用这个方法改变state之后直接用this.state
获取的state
不是更新之后的,只有render发生变化的时候才触发this.setState()
。
constructor(props) {
super(props)
this.state = {
filter: {
type: 'day',
time: '1919-19-13'
}
};
this.onDateChange = this.onDateChange.bind(this)
}
onDateChange(obj, date) {
console.log('date', date);
this.setState({
filter: {
type: 'day',
time: date
}
})
this.handleSearch()
}
handleSearch=()=>{
console.log(this.state.filter) //更新之前的1919-19-13
}
一开始知道setState()
是异步执行方法,在使用这个方法改变state之后直接用this.state
获取的state
不是更新之后的,只有render发生变化的时候才触发this.setState()
。
通过查询资料知道,setState()
其实可以传入第二个参数用于回调函数,对代码作如下改进
constructor(props) {
super(props)
this.state = {
filter: {
type: 'day',
time: '1919-19-13'
}
};
this.onDateChange = this.onDateChange.bind(this)
}
onDateChange(obj, date) {
console.log('date', date);
this.setState({
filter: {
type: 'day',
time: date
}
},this.handleSearch())
}
handleSearch=()=>{
console.log(this.state.filter) //依然是更新之前的1919-19-13
}
发现问题依然存在,继续查询知道必须在第二个回调函数里再包一层函数,改进代码如下
constructor(props) {
super(props)
this.state = {
filter: {
type: 'day',
time: '1919-19-13'
}
};
this.onDateChange = this.onDateChange.bind(this)
}
onDateChange(obj, date) {
console.log('date', date);
this.setState({
filter: {
type: 'day',
time: date
}
},()=> this.handleSearch())
}
handleSearch=()=>{
console.log(this.state.filter) //输出更新后的state
}
setState()之后使用state的问题的更多相关文章
- React.js 小书 Lesson10 - 组件的 state 和 setState
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson10 转载请注明出处,保留原文链接和作者信息. state 我们前面提到过,一个组件的显示形态 ...
- 组件的 state 和 setState
state 我们前面提到过,一个组件的显示形态是可以由它数据状态和配置参数决定的.一个组件可以拥有自己的状态,就像一个点赞按钮,可以有“已点赞”和“未点赞”状态,并且可以在这两种状态之间进行切换.Re ...
- React Native props & state
今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下 ...
- React Native知识11-Props(属性)与State(状态)
一:Props(属性) 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性).props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变 通过 ...
- State(状态)
props和state.props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变. 对于需要改变的数据,我们需要使用state.般来说,你需要在constructor中初始化st ...
- React组件系统、props与状态(state)
多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...
- 初识React,Virutal DOM, State以及生命周期
这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...
- reactjs入门到实战(四)---- state详解
this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性. 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开 ...
- setState的同步更新
react中的setState特点: 是异步操作函数: 组件在还没有渲染之前, this.setState 还没有被调用: 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setSt ...
随机推荐
- python 图片相似度
def pil_image_similarity(filepath1, filepath2): from PIL import Image from functools import reduce i ...
- spring cloud Eureka注册中心集群搭建
1.创建springcloud-eureka maven项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...
- mongodb数据中的复制(副本集)
---恢复内容开始--- 什么是复制 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性,并可以保证数据的安全性 复制还允许从硬件故障和服务中断中恢复数据 为什么要复制 数据备 ...
- Java charAt() 方法
charAt() 方法用于返回指定索引处的字符.索引范围为从 0 到 length() - 1. 参数 index -- 字符的索引. 返回值 返回指定索引处的字符. 实例 public class ...
- Just oj 2018 C语言程序设计竞赛(高级组)H: CBT?
H: CBT? 时间限制: 1 s 内存限制: 128 MB 提交 我的状态 题目描述 对于二叉树,如果这棵树的节点排布是按行从上到下,每行从左到右挨个放置,中间不会有空闲的节点. ...
- C++11 中的function和bind、lambda用法
std::function 1. std::bind绑定一个成员函数 #include <iostream> #include <functional> struct Foo ...
- 小程序wx.getUserInfo获取用户信息方案介绍
问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本 API和组件 - - - - 背景 小程序一个比较重要的能力就是获取用户信息,也就是使用 wx.g ...
- Linux下查看80端口是否被占用
方式一: ps -ef |grep 80 方式二: netstat -anp |grep :80 方式三: lsof -i:80 方式四: netstat -tunlp |grep :80 方式五: ...
- Refs & DOM
Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方式. 在典型的 React 数据流中, 属性(props)是父组件与子代交互的唯一方式.要修改子组件,你需要 ...
- MySQL应用异常问题解决
MySQL错误:Every derived table must have its own alias 派生表都必须有自己的别名 一般在多表查询时,会出现此错误. 因为,进行嵌套查询的时候子查询出来的 ...