JavaScript/React - 새로운 Promise 생성자에서 'this'에 액세스합니다.

Question

내 React 앱에서 this.setState()을 새로운 Promise의 본문에 호출하려고합니다. 그러나 Promise 본문에 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(); 
    }); 
});