react 中 setState的两种写法、修改部分属性

react 想要更新视图只能用 setState( ) 方法 

关于 setState() 这里有两点需要知道

1. 不要直接更新状态, 而是使用 setState()

2. 状态更新是异步的,你如果依靠它们的值来计算下一个状态不可以直接使用。

1、两种调用方式

第一种 : 直接 改变 

this.setState({
      msg: "我被改变了"
});

第二种 :通过 setState()传入一个函数,这种用法 可以借助于 原有的state里的值

this.setState(state => {
  return {
    msg: "hello"
  };
});

2、修改状态后依据状态做些操作

第一种:回调函数

this.setState({
      active:true
    },()=>{
      console.log(this.state.active,'2')
})
console.log(this.state.active,'1')

第二种:async / await

  change = async ()=>{
    await this.setState({
      active:true
    })
    console.log(this.state.active,'1')
  }

3、修改某个对象的部分属性,使用Object.assign()

  change = (pagination, filters, sorter, extra)=>{
    this.setState((state)=>{
      return {
        params:Object.assign(state.params,{
          pageSize: pagination.pageSize,
          pageNum: pagination.current
        })
      }
    })
  }

 

posted @ 2020-04-21 13:52  Jade_g  阅读(4854)  评论(0编辑  收藏  举报