时间戳

首页 > 解决方案 > 构造函数在异步函数中绑定 this 不起作用？

javascript - 构造函数在异步函数中绑定 this 不起作用？

问题描述

我在构造函数中绑定了我的函数，但它什么也没给我？我做错什么了 ？我想在异步函数中访问我的类函数 

class UploadAvatar extends React.Component {

    constructor(props) {
      super(props);
      this.changeAvatar = this.changeAvatar.bind(this);
    }

  changeAvatar() {

    console.log('changeavt')


  }
    async function uploadImageAsync(uri) {

      var reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function() {
        var base64data = reader.result;
        // this.changeAvatar(base64data)
        console.log(this)
      }
    }
}

标签： javascriptreactjs

解决方案

  1. 从您的类方法中删除function关键字。
  2. uploadImageAsync用这个绑定你
class UploadAvatar extends React.Component {
  constructor(props) {
    super(props);
    this.changeAvatar = this.changeAvatar.bind(this);
    // bind this 
    this.uploadImageAsync = this.uploadImageAsync.bind(this);
  }

  changeAvatar() {
    console.log("changeavt");
  }

  // remove `function` keyword
  async uploadImageAsync(uri) {
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      var base64data = reader.result;
      // this.changeAvatar(base64data)
      console.log(this);
    };
  }
}

推荐阅读