ajax呼び出しで項目をマッピングすると反応する

Question

私は、ajaxを呼び出して、Googleフォントのapiを呼び出し、そこからアイテムのリストを受け取っています。私は私のcomponentDidMountメソッドの中で私のajax呼び出しを呼び出しています。

私は後で私のajaxリクエストから受け取ったフォントのオプションのフィールドをレンダリングするメソッドを持っています。私が間違ってやっていることが分かりません。ここ

componentDidMount() { 

    axios.get(URL) 
     .then((data) => { 
     console.log("data" + data); 
     this.setState({ 
      googleFonts: data 
     }) 
     }) 
     .catch((err) => { 
     console.log(err); 
     this.setState({ 
      errors: err 
     }) 
     }) 
    } 

私は私のオプションをレンダリングところ、私は私が取得していますエラーは、データが定義されていないということです

<FormControl 
        style={inputFieldStyle} 
        componentClass="select" 
        placeholder="select" 

        > 

        {this.renderFonts()} 

        </FormControl> 

オプションを返す私のメソッドを呼び出すのはここ

renderFonts() { 

    let data = this.state.googleFonts.data.items; 
    return data.map((font, index) => { 
     return (
     <option>{font.family}</option> 
    ) 
    }) 
    } 

があります具体的にthis.state.googleFonts.data.items。私は、それが私のcomponentDidMount ajax呼び出しの競合状態と、その前に呼び出されているメソッドと関係していると思います。私は間違って何をしていますか？

Answer 1

まだ非同期にフェッチされていないプロパティにアクセスしようとしていて、Cannot read property of undefinedエラーが発生しているようです。

if (!this.state.googleFonts) return null; 

この方法で、あなたはそれが定義される前にthis.state.googleFontsのプロパティにアクセスしようとしません：あなたのrenderFontsメソッドの先頭に

は、あなたは、この行を追加することができます。 API呼び出しが解決されると、コンポーネントは正しい値で再レンダリングされます。

他のオプションは、のプロパティにアクセスしようとするとエラーをスローするのではなく、undefinedを返すlodash _.getを使用することです。