关于 this.setState

今天把以前的代码改了一下，发现以前的简直是惨不忍睹！！！

1、以前在 使用componentDidMount 中写请求的时候，获得的数据用this.setState的时候，页面并没有发生渲染，或者可以说是晚了一点。。。。

• 要理解 componentDidMount 这个生命周期，我们调用生命周期函数 componentDidMount() ,
  即在组件加载完成，render() 之后调用，这个方法只会触发一次,一般请求也是写在这里的，那么也就是说，组件首先渲染了一次之后才调用它，这时候请求的数据在通过this.setState
  又一次render()进行了渲染，这就是一个过程
  (当然还有卸载什么的。。。暂略过)。

2、说一个我当初在开发过程中碰到过的坑

1. this.setState之后 在componentDidMount 里面调用的方法没有数据

 componentDidMount=(e)=>{
  Common.ajaxRequest(url, param, (res) => {
         this.setState({
             dataList: res.data
         })
     })
     console.log(this.state.dataList,'===dataList')
   this.getMapData()
 }

在这里 获取的数据dataList 是有数据的，但是调用了 this.getMapData()之后会发现在方法getMapData里面 数据是[]，注意：有时候这里在里面打印（this.state.dataList）是有数据的，对的，有时候是有的，this.setState是异步的(在setTimeout中会为同步)，那么我猜有那么一个几率是，this.setState执行异步时，太快，以至于console，还没有执行就数据返回了，所以才有数据打印出来。(这边只是猜测，如果后续发现了解了原因，我再补充一下)

紧接着说，因为 this.setState异步，所以下面执行getMapData方法的时候 数据可能还没有返回，那么this.state.dataList的数据就肯定是[]了(我这里设置的最初state是[])，异步就是这样，上一个方法还在执行，下一个方法已经开始执行了。

然后解决方法 就是在this.setState的回调里面执行方法 ↓

componentDidMount=(e)=>{
  Common.ajaxRequest(url, param, (res) => {
         this.setState({
             dataList: res.data
         })
     },()=>{
      console.log(this.state.dataList,'===dataList')
      this.getMapData()
     })
   }

这样使用，在回调打印console.log 数据是获得的，再执行this.getMapData()方法，this.state.dataList数据就不是[]，而是你获取的数据。

`

这篇差不多结束了，以后有补充的或修改的我会再次加上，谢谢各位的观看，文章有什么不足之处欢迎提出，谢谢！