反応成分のinitialStateを正しく定義する方法は？

Question

たとえば、ArticleListコンポーネントは、最初はデータがありません。以下のような

状態多分何か：まず

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

、私はそれが何もない（ヌル）にレンダリングします。

isFetchingがtrueであることを確認すると、nullがレンダリングされます。ただし、isFetching状態のローディングスピナーベースもレンダリングされます。

articleList.length === 0を確認すると、nullがレンダリングされます。しかし、それはまた、その状態にユーザーフレンドリーなメッセージベースを表示したい。

したがって、初期レンダリング結果がnullであることを確認するための他のプロパティが必要な場合は、

この状況にはどのようなベストプラクティスがありますか？

Answer 1

this.state = {};を使用できます。 を使用して状態を初期化する

次に、ドキュメントで説明されているようにthis.setState（）を使用する必要があります。

ES6では、変数をチェックする

variable === undefined 

と

variable === null 

を使用することができます。

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