React-Native 使用状态来渲染相似子组件小问题

今天要实现一个和tabNavigator 类似功能的选择框问题

下面是碰到一段代码：

{this.state.selectedTab === selectTabData[0] ?
   <ScrollView>
       <ArticleListComp
            contents={this.props.chosen}
            loadData={(value) => {
                  this.props.loadChosen(value); 
             }}      
            navigator={this.props.navigator}    
        />  
    </ScrollView> 
   : 
    <ScrollView>  
        <ArticleListComp      
            contents={this.props.realTime}
            loadData={(value) => { 
                 this.props.loadRealTime(value); 
             }} 
             navigator={this.props.navigator}
          />
    </ScrollView>
  }

然后发现一个问题，就是两个相似的控件每次只会渲染第一个，第二个根本不会去渲染
问题就是两个控件，React渲染的时候偷懒了，以为是一个，就没有渲染第二个，所以每个控件加上相应的key即可