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

Question

在我的React应用中，我试图在新承诺的正文中调用this.setState() - 但是，this是Promise的正文中的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

箭头功能的有趣素质之一是它们没有自己的 this，因此他们查看了一个本地词汇环境。

您可以通过使用箭头函数来解决必须将this分配给新变量的问题：

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