2022-05-19 this.setData is not a function

前言：react项目在调用接口时，本打算把返回值给变量赋值，没曾想就报错了。

排查：this.setData所在的函数块内的this没有调用到setData这个方法，据很多网友提示是指this没有定义，但我打印出来是有指向react实例的。

找了半天没寻着答案，我就去看了下前辈留下的代码。发现前辈把setData进行了一次封装。具体如下：

// app.jsx
// 封装setData
setStateSync(self, data) {
    return new Promise(resolve => {
      if (self._isMounted) {
        self.setState(data, () => {
          resolve();
        });
      } else {
        resolve();
      }
    });
  },

// Home.jsx
// 使用

    componentDidMount() {
        this._isMounted = true
    }


    componentWillUnmount() {
        this._isMounted = false
    }

　setData = (data) => app.setStateSync(this, data)
// 注：_isMounted不用定义在this.state里面。

简单来说就是，调用接口的时候是异步的,而this.setData在视图层的操作是异步,因此页面渲染可能并不会立即发生,因此我们可以给setDat设置一个promise，

让它接收一个回调函数，而不是一个对象，这个回调函数有两个参数，第一个是接收前的一个状态值，然后第二个时更新后的值

原因：this.setData异步了，不能立即执行操作。

解决方法：设置回调函数来触发setData，可参考我上面的代码。