특정 구성 요소가 React 구성 요소에서 정의되지 않았습니다.

Question

https://openweathermap.org/에서 기상 데이터를 가져 오는 컨테이너 구성 요소가 있습니다. 그런 다음 컨테이너 구성 요소는 해당 상태 데이터를 프레젠테이션 구성 요소로 공급합니다.

일부 주 속성이 있지만 프레젠테이션 구성 요소에서는 다른 것들은 정의되지 않습니다. 타임 아웃에서 랩핑하면 표시됩니다.

왜 이런지가 있었는지 찾고 있었지만 컨테이너 구성 요소에서 가져 와서 프레젠테이션 구성 요소로 전달한 후 정의되지 않은 이유를 찾을 수 없었습니다.

CodePen : 표현 적 컨테이너 구성 요소에 대한 https://codepen.io/ZCKVNS/pen/wpGaMe?editors=0010가

기사 : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 당신은 단지 규칙으로, 당신은 데이터를받을 때까지 App에서 null을 반환하거나, 수

const App = data => { 

    setTimeout(() => { 
    console.log('clouds', data.data.clouds.all); //defined 
    console.log('lat',data.data.coord.lat); //defined 
    console.log('lon', data.data.coord.lon); //defined 
    }, 100); 

    return (
    <div> 
     { data.data.clouds.all } <!-- Not defined --> 
    </div> 
); 
} 

class AppContainer extends React.Component { 
    constructor() { 
    super(); 
    this.state = { data: {} }; 
    } 

    componentDidMount() { 
    fetch('https://api.openweathermap.org/data/2.5/weather?zip=43055,us&appid=4e08bb16c8936bd92b4780f9e2cdf00f') 
     .then(res => res.json()) 
     .then(data => this.setState({ data })); 
    } 

    render() { 
    return React.createElement(App, { data: this.state.data }); 
    } 
} 

ReactDOM.render(
    <AppContainer />, 
    document.getElementById('container') 
); 

Answer 1

, UI의 어떤 종류를 반환 가져 오기 아이콘이 표시되는 동안 가져 오기가 완료되는 동안 :

AppContainer :

App에서 다음

this.state = { data: null }; // so ternary operator is falsey when data isn't done fetching 

:이 무엇

return (
    <div> 
    { 
     data.data ? 
     data.data.clouds.all 
     : 
     <img src={LOADING_ICON_HERE} /> 
    } 
    </div> 
); 

은 소품 data가 존재하는지 확인합니다. 그럴 경우 data.data.clouds.all을 렌더링합니다. 그렇지 않은 경우 요청이 완료되는 동안로드 아이콘을 표시합니다. 무엇이든 표시하고 싶지 않으면 다음과 같이 단축 할 수 있습니다.

{ 
    data.data && 
    data.data.clouds.all 
}