gérer le chargement et pas de contenu séparément

Question

Dans mon application, j'obtiens le contenu de l'API. Je pourrais montrer le contenu et montrer également l'icône de chargeur jusqu'à ce que le contenu ne soit pas chargé. Mais s'il n'y a pas de contenu, la page affiche une icône de chargeur inattendue. La fonctionnalité attendue est de ne montrer aucun contenu disponible s'il n'y a pas de contenu du tout.

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> 
    ); 
    } 
    } 

Ce sont les données que je reçois

Answer 1

Il est bon d'avoir des API de retour promesses afin que vous puissiez répondre quand ils sont complets

cet exemple suppose que vous avez-vous Appel API et les données iraient à un magasin et qui viendraient sur les accessoires

... 

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(); 
}