약속

Question

내부 '이'맥락 나는 반응 아마 바보 같은 실수를하고 함께 아주 새로운 오전 잃는다 반응한다. 약속을 되 돌리는 액시 얼 (axios)으로 API 호출을하려고합니다. 이 약속이 해결되면 내가 콜백을 통해 부모에 상태를 업데이트하는 기능이 결과를 전달하고 싶습니다. 그러나 그것이 정의되지 않은 것처럼 'this'가 사라진 것처럼 보입니다. 앞으로 해결 될 것이므로 더 이상 '이'맥락이 없다고 생각합니다. 나는 임시로 콜백을 지정하여 그것을 극복하고를 사용하지만 서투른 느낌 할 수 있습니다.

axios.get(url) 
    .then(function(response) { 
    this.props.handler(response.data.thing) 
    }) 
    .catch(function(error) { 
    console.log(error) 
    }) 

이 작품 : 여기에 코드입니다. 화살표 기능이 와서 어디

let handler = this.props.handler 
axios.get(url) 
    .then(function(response) { 
    handler(response.data.word) 
    }) 
    .catch(function(error) { 
    console.log(error) 
    }) 

Answer 1

이것은 기본적으로 위에서 this을 유지하는 기능을 화살표와 함수 내에서 그것을 무시하지 않습니다. MDN에서 자세한 내용을 볼 수 있습니다. 최신 기능이기 때문에 일부 구형 브라우저는 지원하지 않습니다.

다음 코드는 질문에 코드를 기반으로 화살표 함수를 사용하는 예입니다.

는

axios.get(url) 
    .then((response) => { 
    this.props.handler(response.data.thing) 
    }) 
    .catch((error) => { 
    console.log(error) 
    }) 

편집 : ES6 문법없이 이렇게

다른 방법은 함수 이외의 변수를 설정한다. 화살표 함수가 지원되지 않는 경우에도 질문에 제공 한 다른 예제가 작동합니다. 그러나 다음 코드도 사용할 수 있습니다.

var self = this; 
axios.get(url) 
    .then(function (response) { 
    self.props.handler(response.data.thing) 
    }) 
    .catch(function (error) { 
    console.log(error) 
    }) 

이 만든 변수 (self)를 사용하여 올바른 this에 액세스 할 수 있습니다. 물론 언급 한 바와 같이이의 단점은 조금 더 투박하고 화살표 기능을 사용하는 등 아주 깨끗하지 않습니다.

Arrow 기능과의 브라우저 호환성에 대한 자세한 내용은 Can I use을 참조하십시오. React를 사용하는 경우 ES6 구문을 변환하고 더 많은 브라우저와 호환되도록 컴파일러로 Babel을 사용할 수있는 좋은 기회입니다.