.then 异步函数中的 React-Native 调用函数

Posted 2023-03-07

【中文标题】.then 异步函数中的 React-Native 调用函数

【英文标题】：React-Native call function inside .then async function

【发布时间】：2017-07-20 06:31:09

【问题描述】：

我试图在用户拍照后调用一个函数。我尝试通过以下方式这样做：

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

图像路径被记录，没有错误发生。

【参考方案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，因为您需要使用箭头函数或在构造函数中使用bind 将doSomething 绑定到类。第三种选择是使用装饰器通过 Babel 自动绑定方法。

祝你好运！

【参考方案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);