javascript - 构造函数在异步函数中将此绑定不起作用？(Constructor bind this in async function not working?)

Question

I bind my function in constructor but its return me nothing ?

(我将我的函数绑定到构造函数中，但是什么也没返回？)

what did i do wrong ?

(我做错什么了 ？)

i want to access my class function inside the async function

(我想在异步函数中访问我的类函数)

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)
      }
    }
}

  ask by manyouuwx translate from so

Answer 1

1. Remove function keyword from your class method.

   (从类方法中删除function关键字。)

2. Bind your uploadImageAsync with this

   (与此绑定您的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);
    };
  }
}