setState()之后使用state的问题

不念不忘少年蓝@ 2022-05-10 03:20 177阅读 0赞

一开始知道`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
      }