하위 구성 요소에서 상태에 액세스 할 수 없습니다.

Question

날씨 애플리케이션을 구축하려고합니다.

getInitialState: function() { 
    return {text: '', weather: null}; 
    }, 
    handleClick: function() { 
    WeatherApi.get('q=' + this.state.text).then(function(data) { 
     this.setState({weather: data}) 
    }.bind(this)); 
    }, 

는 내가 뭘 원하는 것은 그것을 한 번 자식 componenet에 날씨 소품의 상태를 전달할 수 있습니다 : 나는 API를 통해 데이터를 가져 와서 처음은 null입니다 날씨 소품의 상태를 설정하는 검색 창 구성 요소가 그런 다음

<TodaysWeatherContainer weatherData={this.state.weather} /> 

이이 같은 구성 요소에서 액세스됩니다 : 사용자를 통해 설정됩니다 나는 도시를 검색 할 때 지금, 나는 다음과 같은 오류를 얻을 수

var TodaysWeatherContainer = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <p>{this.props.weatherData}</p> 
     </div> 
    ); 
    } 
}); 

을 :

잡히지 않음 (약속 있음) 오류 : 개체가 React 하위로 유효하지 않습니다 (발견됨 : 키가있는 개체 (도시, 대구, 메시지, cnt, 목록)). 자식 컬렉션을 렌더링하려는 경우 대신 배열을 사용하거나 React 애드온의 createFragment (object)를 사용하여 객체를 래핑하십시오. 렌더링 방법이 TodaysWeatherContainer인지 확인하십시오.

catch되지 않은 형식 오류 : 내가 추가하는 경우

는 {this.props.weatherData.city은} 나는이 오류가 널 (null)

의 특성 '도시'를 읽을 수 없습니다 내가 혼란스러워지고있어 곳입니다. this.props.weatherData를 사용하여 객체가 반환 될 때 null이 될 수 있습니까?

Answer 1

AJAX 요청에 의해 반환 된 데이터는 텍스트 (해당 <p></p> 태그 사이의 유효한 자식 노드)가 아니라 잘못된 자식 인 객체 인 것 같습니다.

상태의 weather 속성을 전체 개체가 아닌 API 응답에 의해 반환 된 개체의 속성으로 설정합니다.

최근 댓글에 대한 응답으로 weatherData.city 그 자체가 구문 분석해야하는 개체 인 것 같습니다. API에 대해 잘 모르는 경우이 문제를 직접 해결할 수 있습니다.

@deowk이 주석에서 지적했듯이 두 번째 오류는 상위 구성 요소의 초기 상태 인 {weather: null}에서 비롯된 것입니다. 자식 구성 요소가 처음 렌더링 될 때 null 개체에 city 속성을 찾으려고 시도했습니다. 이제 자식 구성 요소 자체가 아니라 API 콜백에서 조회를 수행 중이므로 더 이상 오류를 수신하지 않습니다.