ロードの処理と別途コンテンツなし

Question

私のアプリケーションでは、APIからコンテンツを取得します。私はコンテンツを表示することができ、また、コンテンツが読み込まれなくなるまでローダーアイコンを表示することができます。しかし、コンテンツがなければ、予期しないローダーアイコンがページに表示されます。期待される機能は、コンテンツがまったくない場合、利用可能なコンテンツを表示しないことです。

render() { 
    const { logs } = this.state; 
    if (logs.size === undefined) { 
     return <div>No Logs</div>; 
    } else if (isEmpty(logs)) { 
     return (
     <div className="earth-spinning"> 
      <img src={EarthSpinning} alt="spinner" style={{ margin: "0 auto" }} /> 
     </div> 
    ); 
    } else { 
     return (
     <div> 
      <h2>Logs</h2> 
      <button onClick={() => this.props.deleteLogs()}> 
      Delete All Logs 
      </button> 
      <ul className="list-group"> 
      {this.renderLogs()} 
      {this.state.show ? this.props.dialog : null} 
      </ul> 
     </div> 
    ); 
    } 
    } 

これは、私は彼らがこの例

完了したときにに対応できるように

Answer 1

その持っている良いAPIは約束を返す取得するデータはあなたを行うだろうと仮定していますAPIコールとデータは店に行き、それは小道具に来るだろう

... 

getInitialState() { 
    return { 
     loading: true 
    }; 
} 

componentWillMount() { 
    this.props.requestLogs() 
     .then(() => this.setState({ loading: false }); 
} 

render() { 
    if (this.state.loading) { 
     return this.renderLoading(); 
    } 

    if (this.props.logs.length === 0) { 
     return this.renderEmptyView(); 
    } 

    return this.renderStuff(); 
}