JavaScript/React - 在新的Promise构造函数中访问绑定'this'

Question

在我的React应用程序中，我试图在Promise的主体内调用this.setState() - 但是，this是undefined。

功能是一个叫做ui.js模块：

export const toggleButtonsDisabled = function(buttonsAreDisabled) { 
    return new Promise(function(resolve) { 
     this.setState({"buttonsDisabled": !buttonsAreDisabled},() => { 
      resolve() 
     }) 
    }) 
} 

，它是在一个组件中引用，象这样：

import { toggleButtonsDisabled } from "../../scripts/ui" 

class Test extends Component { 
    constructor() { 
     this.toggleButtonsDisabled = toggleButtonsDisabled.bind(this) 
     this.handleSubmit = this.handleSubmit.bind(this) 
     this.state = { 
      "buttonsDisabled": false 
     } 
    } 

    handleSubmit() { 
     this.toggleButtonsDisabled(this.state.buttonsDisabled) 
      .then(function() { 
       // DO SOME STUFF... 
      }) 
    } 

    // FORM, ETC... 
} 

如果handleSubmit()被调用时，一个错误出现回话说cannot read property 'setState' of undefined - 中参照this已经失去了诺言的范围。

如果我重写功能：

export const toggleButtonsDisabled = function(buttonsAreDisabled) { 
    const reactComponent = this 

    return new Promise(function(resolve) { 
     reactComponent.setState({"buttonsDisabled": !buttonsAreDisabled},() => { 
      resolve() 
     }) 
    }) 
} 

然后它工作，没有问题... ...但有来处理这更优雅的方式？还是我要求不可能的？

Answer 1

arrow functions其中一个有趣的特质是他们没有自己的this，所以他们只关注当地的词汇环境。

可以解决您的问题具有使用箭头功能分配this到一个新的变量：

return new Promise(resolve => { 
    this.setState({"buttonsDisabled": !buttonsAreDisabled},() => { 
    resolve(); 
    }); 
});