コンポーネント内で非同期にデータをフェッチし、それをレンダリングで別のコンポーネントに渡す方法は？

Question

私は反応アプリを持っていて、データを非同期に取り出して処理し、現在のコンポーネントの状態を変更し、それをレンダリングの別のコンポーネントに渡したいと思っています。私はcomponentWillMountでフェッチしようとしましたが、データがフェッチされる前にレンダリングが起こっているようです。そのための実用的な解決策は何ですか？また、ES6コンストラクタでデータを取得しようとしましたが、問題は引き続き発生します。

ご協力いただきありがとうございます。

Answer 1

データを取得するのに理想的な場所はcomponentWillMountですが、データが取得される前に子コンポーネントがレンダリングされる可能性があるため、非同期性があるため2つのことができます。

のように、結果がフェッチされるまで、コンポーネントをレンダリングしていない負荷状態を維持する：その他の方法は、空の小道具を持っているし、子コンポーネントにチェックするために実行することです

constructor() { 
    super(); 
    this.state = { 
     isLoading: true, 
     // other states 
    } 
} 

componentWillMount() { 
    //your async request here 
} 

render() { 
    if(this.state.isLoading) { 
     return null; // or you can render laoding spinner here 
    } else { 
     return (
      //JSX here with the props 
     ) 
    } 
} 

：

私は個人的に好む

constructor() { 
    super(); 
    this.state = { 
     someProps: null; 
    } 
} 

componentWillMount() { 
    //your async request here 
} 

render() { 

    return (
     <Child someProps={this.state.someProps}/> 
    )  
} 

子供

render() { 

    if(this.props.someProps == null) 
     return null; 
    else { 
     return (//JSX contents here); 
    } 
}