Question

例如，ArticleList组件，首先没有数据;

状态可能是这样的：

＆＃13;

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

＆＃13;

首先，我希望它渲染为空（null）。

如果我检查isFetching是否为true，则渲染为null。但它也会在isFetching状态下渲染一个加载微调器。

如果我检查articleList.length === 0，则渲染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;
}

如何为react组件定义initialState正确？

2 个答案: