React+Clarifai API项目中API成功回调函数未执行问题求助

问题 #

我是Web开发新手，正在学习用React和Clarifai API开发人脸识别应用。用户可在搜索框粘贴图片URL，将其传入Clarifai API。我写了calculateFaceLocation函数处理API响应，现在能成功接收API响应（已用console.log验证），但无法执行this.calculateFaceLocation(response)调用，回调里执行其他函数也没效果。相关代码如下：

import React, { Component } from 'react';
import ParticlesBG from './components/Particles/Particles.js';
import Navigation from './components/Navigation/Navigation.js';
import Logo from './components/Logo/Logo.js';
import Rank from './components/Rank/Rank.js';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm.js';
import FaceRecognition from './components/FaceRecognition/FaceRecognition.js';
import Clarifai from 'clarifai';

window.process = {
    env: {
        NODE_ENV: 'development'
    }
}

const app = new Clarifai.App({
  apiKey: " "
});

class App extends Component {
  constructor() {
    super()
    this.state = {
      input: "",
      imageURL:"",
      box:{}
    }
  }

  calculateFaceLocation = (data) => {
    console.log(data);
  };

  onInputChange = (event) => {
    this.setState({input: event.target.value});
  };

  onButtonClick = () => {
    this.setState({imageURL: this.state.input});
    app.models.predict({ 
                 id: 'face-detection', 
                 name: 'face-detection', 
                 version: '6dc7e46bc9124c5c8824be4822abe105', 
                 type: 'visual-detector', 
             },
             this.state.input
            )
    .then(
      function(response) {
        this.calculateFaceLocation(response);
      },
      function(err) {
        console.log(err);
      }
    );
  };

  render() {
    return (
      // JSX 代码省略
    )
  }
}

export default App;

已确认回调内能拿到响应，但函数调用均未执行。

解决方案 #

问题出在then回调里的this指向错误：普通function作为回调时，this指向的是全局对象（浏览器环境下为window），而非React组件实例，所以找不到挂载在组件上的calculateFaceLocation方法。

有两种修复方式：

方式1：使用箭头函数作为回调 #

箭头函数不会绑定自身的this，会继承外层作用域的this（即onButtonClick中的组件实例），修改后的onButtonClick方法如下：

onButtonClick = () => {
  this.setState({imageURL: this.state.input});
  app.models.predict({ 
               id: 'face-detection', 
               name: 'face-detection', 
               version: '6dc7e46bc9124c5c8824be4822abe105', 
               type: 'visual-detector', 
           },
           this.state.input
          )
  .then(
    (response) => {
      this.calculateFaceLocation(response);
    },
    (err) => {
      console.log(err);
    }
  );
};

方式2：提前保存组件实例的this #

在onButtonClick中先把组件实例的this赋值给一个变量（比如that），然后在回调里用这个变量调用方法：

onButtonClick = () => {
  this.setState({imageURL: this.state.input});
  const that = this; // 保存组件实例的this
  app.models.predict({ 
               id: 'face-detection', 
               name: 'face-detection', 
               version: '6dc7e46bc9124c5c8824be4822abe105', 
               type: 'visual-detector', 
           },
           this.state.input
          )
  .then(
    function(response) {
      that.calculateFaceLocation(response); // 使用保存的that调用方法
    },
    function(err) {
      console.log(err);
    }
  );
};

内容的提问来源于stack exchange，提问作者Tom