一开始知道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的问题的更多相关文章

  1. React.js 小书 Lesson10 - 组件的 state 和 setState

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson10 转载请注明出处,保留原文链接和作者信息. state 我们前面提到过,一个组件的显示形态 ...

  2. 组件的 state 和 setState

    state 我们前面提到过,一个组件的显示形态是可以由它数据状态和配置参数决定的.一个组件可以拥有自己的状态,就像一个点赞按钮,可以有“已点赞”和“未点赞”状态,并且可以在这两种状态之间进行切换.Re ...

  3. React Native props & state

    今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下 ...

  4. React Native知识11-Props(属性)与State(状态)

    一:Props(属性) 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性).props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变 通过 ...

  5. State(状态)

    props和state.props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变. 对于需要改变的数据,我们需要使用state.般来说,你需要在constructor中初始化st ...

  6. React组件系统、props与状态(state)

     多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...

  7. 初识React,Virutal DOM, State以及生命周期

    这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...

  8. reactjs入门到实战(四)---- state详解

    this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性. 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开 ...

  9. setState的同步更新

    react中的setState特点: 是异步操作函数: 组件在还没有渲染之前, this.setState 还没有被调用: 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setSt ...

随机推荐

  1. python 图片相似度

    def pil_image_similarity(filepath1, filepath2): from PIL import Image from functools import reduce i ...

  2. spring cloud Eureka注册中心集群搭建

    1.创建springcloud-eureka maven项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...

  3. mongodb数据中的复制(副本集)

    ---恢复内容开始--- 什么是复制 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性,并可以保证数据的安全性 复制还允许从硬件故障和服务中断中恢复数据 为什么要复制 数据备 ...

  4. Java charAt() 方法

    charAt() 方法用于返回指定索引处的字符.索引范围为从 0 到 length() - 1. 参数 index -- 字符的索引. 返回值 返回指定索引处的字符. 实例 public class ...

  5. Just oj 2018 C语言程序设计竞赛(高级组)H: CBT?

    H: CBT? 时间限制: 1 s      内存限制: 128 MB      提交 我的状态 题目描述 对于二叉树,如果这棵树的节点排布是按行从上到下,每行从左到右挨个放置,中间不会有空闲的节点. ...

  6. C++11 中的function和bind、lambda用法

    std::function 1. std::bind绑定一个成员函数 #include <iostream> #include <functional> struct Foo ...

  7. 小程序wx.getUserInfo获取用户信息方案介绍

    问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本 API和组件 - -   - -     背景 小程序一个比较重要的能力就是获取用户信息,也就是使用 wx.g ...

  8. Linux下查看80端口是否被占用

    方式一: ps -ef |grep 80 方式二: netstat -anp |grep :80 方式三: lsof -i:80 方式四: netstat -tunlp |grep :80 方式五: ...

  9. Refs & DOM

    Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方式. 在典型的 React 数据流中, 属性(props)是父组件与子代交互的唯一方式.要修改子组件,你需要 ...

  10. MySQL应用异常问题解决

    MySQL错误:Every derived table must have its own alias 派生表都必须有自己的别名 一般在多表查询时,会出现此错误. 因为,进行嵌套查询的时候子查询出来的 ...