Wie definiere ich den initialState für eine reaktive Komponente?

Question

Zum Beispiel, eine ArticleList-Komponente, zunächst gibt es keine Daten;

der Staat vielleicht so etwas wie:

state = { 
 
    articleList: [], 
 
    isFetching: false 
 
}

Zunächst möchte ich es zu nichts (null) zu machen.

Wenn ich überprüfe, dass isFetching true ist, rendern Sie null. Aber es wird auch eine loading Spinner-Basis auf diesem isFetching-Status rendern.

Wenn ich die articleList.length === 0 überprüfe, dann render Null. Es möchte aber auch eine benutzerfreundliche Nachrichtenbasis zu diesem Status anzeigen.

Also, wenn es eine andere Eigenschaft geben sollte, um festzustellen, dass das anfängliche Renderergebnis null ist?

Gibt es eine Best Practice für diese Situation?

Answer 1

können Sie verwenden this.state = {}; , um den Zustand

zu initialisieren, müssen Sie this.setState() wie in der Dokumentation beschrieben verwenden.

in es6 können Sie

variable === undefined 

verwenden und

variable === null 

die Variable zu überprüfen.

Answer 2

state = { 
    articleList : [], 
    fetching: false 
} 
render() { 
    const {fetching, articleList} = this.state; 
    if(fetching) { 
     //show loader here 
     return loader; 
    } 
    if(!fetching && articleList) { 
     if(articleList.length === 0) { 
     //show message here 
     return message; 
     } 
     //render content here 
     return content; 
    } 
    return null; 
}