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

  • Z时代
  • 2024-01-10
  • 分类：问答

在我的React应用程序中，我试图在Promise的主体内调用this.setState() - 但是，this是undefined。JavaScript/React - 在新的Promise构造函数中访问绑定'this'

功能是一个叫做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() 
     }) 
    }) 
}

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

回答：

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

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

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

以上是 JavaScript/React - 在新的Promise构造函数中访问绑定'this' 的全部内容， 来源链接： utcz.com/qa/258215.html

回到顶部