ReactJS - コンポーネントをレンダリングする前にデータをロードする

Question

ReactJSでは、 "id"で新しいルートに変更しています。この "id"に基づいて、APIを呼び出してデータをフェッチする必要があります。

componentDidMountとcomponentWillMountでAPI呼び出しを使用しましたが、setState()でデータを取得しようとしました。私の場合はうまくいきませんでした。

問題はrender()部分にあります。データを（状態から）使用したい場合、API呼び出しに状態を更新するのに時間がかかるため、データはそこにありません。私はそれが（メソッドをレンダリング）、それは最終的にはなく、遅すぎる状態になりたい場合は、このアプローチでは

componentDidMount() { 
    api.get(id).then((response) => { 
    this.setState({response,}); 
    }); 

、私はデータを持っていない：

は、ここに私のコードです！

ローディングの問題を解決する方法を変更するにはどうすればよいですか？

Answer 1

あなたのやり方は、レンダリングメソッドで応答状態オブジェクトを検証し、null /空の場合は<div>Loading...</div>を返します。

応答に基づいて状態が更新されると、コンポーネントは自動的に再レン​​ダリングされます。今回は、オブジェクトが読み込まれ、コンポーネントHTMLを返すことができます。

render(){ 

    if (!this.state.response){ 
     return <div>Loading...</div> 
    } 

    return (
     <div>Proper Stuff</div> 
    ); 
} 

編集サイトノートで使用すると、コンストラクタで初期状態を設定した場合、あなたはオブジェクトが空ではなく、単にヌル/空の値を持っていることを確認することができます。これは、あなたのrenderメソッドが何をしているのかにも役立ちます。

constructor(props){ 
    super(props); 

    this.state = { 
     response: {...} 
    }; 
} 

Answer 2

あなたのレンダリングコードは、コンポーネントは、それがデータを持ってまでレンダリングし、代わりにLoading ...テキストを表示しません

render(){ 
return({this.state.response? 
      <div> Render your component here</div>: 
      <div> Loading ... </div>}); 
} 

この方法でなければなりません。