위챗 애플릿에서this는 역할 영역 문제this를 가리킨다.setData is not a function 오류 수정

4070 단어 위챗 애플릿

위챗 애플릿에서this는 역할 영역 문제this를 가리킨다.setData is not a function 오류 수정


위챗 애플릿에서 우리는 일반적으로 다음과 같은 방식으로 데이터의 데이터를 수정한다
this.setData({
      index1: e.detail.value
    })

예를 들어 함수에서 데이터를 수정하는 거예요.
bindFaChange1: function (e) {
    this.setData({
      index1: e.detail.value
    })
  }

하지만 우리가 wx를 통과하면request 요청 네트워크 데이터 성공 후 귀속 데이터 시 다음 오류 표시
this.setData is not a function

코드는 다음과 같습니다.
doCalc:function(){
    wx.request({
      url: url,
      method:'POST',
      header: {
        'content-type': 'application/json' //  
      },
      success: function (res) {
        if (res.data.code == 0){
          this.setData({
            maxCount: res.data.maxCount
          });
        }
      }
    })
  }

이는this작용역이 문제를 가리키기 때문에success함수는 실제적으로 패키지이므로this를 통해setData를 직접 설정할 수 없습니다
그럼 어떻게 수정해야 되지?
우리는 현재 대상을 새로운 대상에 부여함으로써
var _this = this;
그리고 _this로 setData 하면 돼요.
전체 코드
doCalc:function(){
    var _this = this;
    wx.request({
      url: url,
      method:'POST',
      header: {
        'content-type': 'application/json' //  
      },
      success: function (res) {
        if (res.data.code == 0){
          _this.setData({
            maxCount: res.data.maxCount
          });
        }
      }
    })
  }

그리고 es6에서 화살표 함수를 사용하는 것은 이 문제가 존재하지 않는다
예:
setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)

우리가 화살표 함수를 사용할 때, 함수 안에 있는this 대상은 정의할 때의 대상이지 사용할 때의 대상이 아니다.화살표 함수 내부에this를 연결하는 메커니즘이 있기 때문이 아니다. 실제 원인은 화살표 함수에 자신의this가 아예 없기 때문이다. 그의this는 바깥쪽을 계승하는 것이기 때문에 내부의this는 외부 코드 블록의this이다.

좋은 웹페이지 즐겨찾기