Реактивная функция вызова внутри асинхронной функции.then

Question

Я пытаюсь вызвать функцию после того, как пользователь сделал снимок. Я пытаюсь сделать это следующим образом:

export default class LA extends Component {
    constructor(props) {
      super(props);
      this.doSomething = this.doSomething.bind(this);
    }


    takePicture() {
      this.camera.capture()
      .then(function(data) {
        doSomething(data.path); //THIS CAUSES THE RUNTIME ERROR
      })
     .catch(err => console.error("error: " + err));
    }

    doSomething(imgPath) {
      console.log(imgPath);
    }


}

И я получаю следующую ошибку при съемке:

Ошибка: Ссылка Ошибка: doSomething не определен

Однако, если я заменю takePicture() на:

takePicture() {
  this.camera.capture()
  .then(function(data) {
    console.log(data.path);
  })
 .catch(err => console.error("error: " + err));
}

Путь к изображению регистрируется, и ошибки не возникает.

Answer 1

Вам нужно использовать this для того, чтобы вызвать функцию-член. Вот рабочий пример:

export default class LA extends Component {
  constructor(props) {
    super(props);
    this.doSomething = this.doSomething.bind(this);
  }


  takePicture() {
    this.camera.capture()
    .then((data) => {
      this.doSomething(data.path);
    })
   .catch(err => console.error("error: " + err));
  }

  doSomething(imgPath) {
    console.log(imgPath);
  }


}

Обратите внимание, что я использовал функцию стрелки для ссылки на правильный this внутри обратного вызова.

Или вы можете также передать функцию напрямую, как это.

  takePicture() {
    this.camera.capture()
      .then(this.doSomething)
      .catch(err => console.error("error: " + err));
  }

Тем не менее, последний подход не будет работать doSomething на правильную область, для этого вам нужно будет связать doSomething в класс, используя функцию стрелки или в конструкторе, используя bind, Третий вариант - использовать декоратор для автоматической привязки метода с помощью Babel.

Удачи!

Answer 2

export default class LA extends Component {

  ...


  takePicture1() {
    this.camera.capture()
    .then((data) => {
      this.doSomething(data.path);   // CORRECT
      // keyword `this` represents instance of class LA
    })
   .catch(err => console.error("error: " + err));
  }


  takePicture2() {
    this.camera.capture()
    .then(function (data) {
      this.doSomething(data.path); // WRONG
      // function defines `this` as the global object 
      // (because it's where the function is executed)
    })
   .catch(err => console.error("error: " + err));
  }

  doSomething(imgPath) {
    console.log(imgPath);
  }
}