Reactjsで未定義のプロパティを読み取ることができません

Question

一部のデータをAjaxリクエストで読み取ろうとしましたが、コードが正しいかどうかわかりません。ここでは、コードは次のとおりです。

interface IProps { 
    data: IScheduler; 
} 

interface IState { 
    list: IScheduler; 
} 

export default class Page extends React.Component<IProps, IState> { 
    constructor(props: IProps) { 
    super(props); 
    this.state = { 
     list: this.props.data, 
    }; 
} 

public componentWillMount() { 
    this.getData(); 
} 

public getData =() => { 
    axios.get(myURL) 
     .then((response) => { 
      this.setState({list: response.data}); 
      console.log(response.data.generatedDate); //works 
     }) 
     .catch((error) => { 
      console.log("DIDN'T CATCH DATA", error); 
     }); 
    } 

public render(): JSX.Element { 
    const data: IScheduler = this.state.list; 

    // getting an error 
    console.log(data.creationDate); 

    return (
     <div className="container"> 
      <MyListCmp data={data}/> 
     </div> 
    ); 
} 

私はエラーが表示されます。

Uncaught TypeError: Cannot read property 'list' of undefined 

私がしようとすると：

console.log(data); // or this.state.list 

それだけで未定義です。

データ例：

Uncaught TypeError: Cannot read property 'generatedDate' of undefined 
Uncaught TypeError: Cannot read property 'meetings' of undefined 

がどのように私はそれを読むことができます：私は '会議' または 'generatedDate' を読みたいときに同じエラーがMyListCmpで発生

{ 
    "generatedDate": "12.12.2017", 
    "meetings": [ 

      ... 
    ] 
} 

？ render（）またはreturn（）のデータがまだフェッチされていない可能性がありますか？

私は、私はこのように行う場合のことを伝えることができます：

const data: IScheduler = { 
    generatedDate: "12.12.2017", 
    meetings: [ 

      ... 
    ] 
} 

それは動作しますが、これはポイントではありません。私はいくつかのURLから取得する必要があります。 私はすべてのアドバイスをいただければ幸いです。

Answer 1

これは、値をチェックしたりデフォルトを提供することなく、値に依存しようとする例です。あなたが書いた：

public render(): JSX.Element { 
    const data: IScheduler = this.state.list; 

    // getting an error 
    console.log(data.creationDate); 

render()すると、応答が戻ってくるまでの時間を持っている、おそらく前に、早期に呼び出されます。あなたがしたいことは、データがまだ利用できない場合でも、を正しくレンダリングする方法を提供することです。。多くの場合、それはロードアニメーションを意味していますが、単に条件付きでデータをレンダリングすることができます

{this.state.list && <MyMeetingList meetings={this.state.list} />} 

なぜこの仕事はしますか？

上記は、「最初のものが真実を評価する場合は2番目のことを行う」ための一般的なショートカットです。 this.state.listが未定義の場合は偽であるため、式はshort-circuit evaluatedをfalseに設定し、&&の右側のJSXは無視されます。

これはなぜ便利ですか？

リアクタrenderは、というと呼ばれます。いつか実験を試したい場合は、renderにブレークポイントを設定するか、logを貼り付けてください。コンポーネントの複雑さとデータの変更頻度によっては、発生頻度について驚くかもしれません。これは、非同期操作の完了に時間がかかる前に少なくとも1回は呼び出されることを意味し、必要な値があればそれを知る必要があります。

Answer 2

How can I read it? Is this possible that in render() or return() data hasn't fetched yet?

はい。したがって、undefined