Question

在我的React应用中，我试图在新Promise的主体内调用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的引用在Promise的范围内丢失。

如果我将函数重写为：

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

JavaScript / React - 访问绑定＆＃39;这个＆＃39;在新的Promise构造函数中

1 个答案: