特定のオブジェクトプロパティがリアクションコンポーネントで定義されていません

Question

私はhttps://openweathermap.org/から天気データを取得するコンテナコンポーネントを持っています。次いで、コンテナコンポーネントは、その状態データをプレゼンテーションコンポーネントに供給する。

いくつかの状態プロパティが存在しますが、Presentationalコンポーネントでは他のものは定義されていません。私はタイムアウトでそれらをラップするが、表示されます。

私はこれがなぜ起こっているのかを探していましたが、コンテナコンポーネントでフェッチされ、プレゼンテーションコンポーネントに渡された後に未定義の理由が見つからなかったのです。

CodePen：プレゼンテーションとコンテナのコンポーネントに関するhttps://codepen.io/ZCKVNS/pen/wpGaMe?editors=0010

記事：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

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のいくつかの種類を返し、慣例として、あなたがデータを受信するまでAppからnullを返す、または可能性がありフェッチが完了している間に（読み込みアイコンなど）：

AppContainer：

で次に

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 
}