ReactJS 및 Flux에서 약속을 가져옵니다.

Question

reactjs 프로젝트 템플릿에서 찾은 서비스 기능이있는 서버에서 데이터를 가져 오려고합니다. 나는 서버로부터 완벽하게 훌륭한 anwser를 받는다. 배열이 서비스 중에는 괜찮은 것을 알 수 있지만, 처음에는 그것을 호출 한 컴포넌트에 넘겨 줄 때가 아니다. 구성 요소에서 약속 객체를 얻습니다.이 객체는 값을 가졌지 만 (콘솔에서 보았습니다) 액세스 할 수 없습니다. 내가 뭘 놓치고 있니? 내 구성 요소가 기능 다음있다

: 나는이 콘솔에 결과를 인쇄 할 때 _handler.handler 내 값으로 값 배열했지만, 난 그들을 사용할 수없는 내부

calculate(dict) { 
    var results = Service.calc(dict) 
     .catch((err) => { 
      var errResp = JSON.parse(err.response); 
      console.log(errResp); 
      this.setState({responseErrors: errResp}); 
    }); 
    this.setState({results:results._handler}); 
} 

나는, 약속 개체를 보았다. 결과에 액세스 할 때 오류가 발생했습니다. _handler.handler : undefined.

호출 된 서비스는 다음과 같습니다

class Service { 
    calc(dict) { 
    return this.handleCalculate(when(request({ 
     url: UserConstants.URL, 
     method: 'POST', 
     type: 'json', 
     data: dict 
    }))); 
} 

handleCalculate(calcPromise) { 
    return calcPromise.then(
     function(data) { 
      console.log(data); //Success 
      return data; 
     } 
    ) 
} 

한편 내가 대신 서비스의 구성 요소에 직접적으로 아약스 전화를 사용합니다. 하지만 그게 나쁜 습관이라는 걸 이해합니다. 어떻게이 권리를 얻을 수 있습니까?

Answer 1

기본적으로 잘못된 위치에 setState를 넣습니다. (결과가 해결되기를 기다리지 않고 즉시 상태를 설정합니다.) 이 모양은 다음과 같습니다.

calculate(dict) { 
    var results = Service.calc(dict) 
     .then(results => { 
     this.setState({results: results}); 
     }) 
     .catch((err) => { 
      var errResp = JSON.parse(err.response); 
      console.log(errResp); 
      this.setState({responseErrors: errResp}); 
    }); 
}