API 요청 후 ReactJS 상태가 업데이트됩니다.

Question

React 상태에 문제가 있습니다. 그것은 객체 배열을받으며 상태가 올바르게 설정되어 있지만 함수가 끝나면 상태가 비어 있음을 나타냅니다. 아무도이 동작을 설명 할 수 있습니까?

componentDidMount() { 
    this.getWeather(); 
    this.getForecast(); 
    this.setState({location: ''}); 
    } 

    getWeather() { 
    if (this.state.location === "") { 
     this.setState({error: 'Please enter something'}); 
    } else { 
     OpenWeather.getWeather(this.state.location).then(result => { 
     if (result.cod === "404") { 
      this.setState({error: 'City not found'}); 
     } else if (result.cod === 200) { 
      this.setState({error: ''}); 
      this.setState({weather: result}); 
     } else { 
      this.setState({error: 'Server error'}); 
     } 
     }); 
    } 
    } 

    getForecast() { 
    OpenWeather.getForecast(this.state.location).then(forecast => { 
     console.log("Returned forecast:"); 
     console.log(forecast); 
     this.setState({forecast: forecast}); 
     console.log("Forecast saved to state(inside function)"); 
     console.log(this.state.forecast); 
    }); 
    console.log("Forecast saved to state(outside function)"); 
    console.log(this.state.forecast); 
    } 

콘솔 출력 :

Forecast saved to state(outside function) 
[] 
Returned forecast: 
(5) [{…}, {…}, {…}, {…}, {…}] 
Forecast saved to state(inside function) 
(5) [{…}, {…}, {…}, {…}, {…}] 

Answer 1

개념적으로 잘못 두 가지가 있습니다.

첫째 : OpenWeather. getForecast에 대한 귀하의 API 요청은 비동기 적이며 따라서이 실행되고 따라서 당신은 이제

Forecast saved to state(outside function) 
[] 

으로 첫 번째 응답을 한 후 API가 응답 자바 스크립트 코드를 반환하기 전에 때이 API 결과 성공, 당신은

Returned forecast: 
(5) [{…}, {…}, {…}, {…}, {…}] 

둘째 얻을 : setState를가 비동기 때문에, 세 번째 문

console.log("Forecast saved to state(inside function)"); 
console.log(this.state.forecast); 

은 업데이트 된 가치를 제공하지 않을 수도 있습니다. 대신 setState 콜백을 사용해야합니다.

확인 추가 정보를

When to use React setState callback

calling setState doesn't mutate state immediately