React.js - saubere Art und Weise Laden/leere Zustände zu unterscheiden in Render

Question

ich meine Komponente habe:

getInitialState() { 
    return { 
     items: [] 
    }; 
}, 

componentDidMount() { 
    // make remote call to fetch `items` 
    this.setState({ 
     items: itemsFromServer 
    }) 
}, 

render(){ 
    if(!this.state.items.length){ 
     // show empty state 
    } 
    // output items 
} 

Extrem gekünstelt/Sandbox, aber dies ist die allgemeine Idee. Wenn Sie diese Komponente zum ersten Mal laden, wird der HTML-Status "Leer" angezeigt, da der Server noch keine Daten zurückgegeben hat.

Hat jemand einen Ansatz/einen React Way ™, um zu prüfen, ob tatsächlich Daten vorhanden sind oder ein Ladezustand angezeigt wird?

Answer 1

Ich habe gerade ein leeres span-Element gerendert, aber Sie könnten genauso einfach einen CSS-Spinner rendern, der anzeigt, dass er geladen wird.

if(!this.state.items.length){ 
    return(<div class="spinner-loader">Loading…</div>); 
} 

http://www.css-spinners.com/

Sie auch berücksichtigen sollten, was ohne Ergebnisse, wenn Ihre Antwort geschieht zurückkommt. Ich würde (this.state.items === null) verwenden, um anzugeben, dass Sie auf Ergebnisse und ein leeres Array/eine leere Sammlung (! This.state.items.length) warten, um anzuzeigen, dass keine Ergebnisse zurückgegeben wurden.