当状态改变时，带有null的RN视图消失

Question

我有一些我不太了解的问题。

我有一个呈现项目列表的组件，然后我包含一个进行计算的子组件，但是当状态发生变化时，只有具有数量值的项目保留在父组件的列表中，其他项目消失，留下空他们被隐藏的空间。

renderProducts(){
  let { currentUser, updateOrderProductQuantity, bookOrder, dateToday,} = this.props;
  var _this = this;
  let products =[];

   _.map(bookOrder.items, function(product){

     products.push(
     <View>
      <View style={{flex:1, flexDirection: 'row', borderWidth:1, borderColor: 'gray', }}>
       <View style={{flex:3, borderWidth:1, borderColor: 'gray', padding: 10, }}>
         <Text>{product.name}</Text>
       </View>
       <View style={{flex:1, borderWidth:1, padding: 10, borderColor: 'gray', }}>
       <TextInput
         placeholder="#"
         keyboardType="numeric"
         onChangeText={ (text) => _this.updateQuantity(product.product_id, text) }
         value={ product.quantity? product.quantity.toString(): '' }
         />
        </View>
       </View>
      </View>
    )
  });
return (
    <View>
       { products }
      <OrderCalculator products={bookOrder.items} currency={ currentUser.currency}/>
      <View style={{alignItems: 'center', justifyContent: 'center', padding: 10, }}>
      </View>
      <View style={{ flex:1, flexDirection:'row', padding: 10,}}>
        <Text>Delivery date:       </Text>
        <Button
          onPress={this.showPicker.bind(this, 'all', {
            date: this.state.date,
            minDate: this.state.date,
            maxDate: this.state.maxdate,
          })} block success iconRight>{ moment(bookOrder.scheduled_delivery_time).format('YYYY-MM-DD') }<Icon name="ios-calendar" /></Button>
        </View>
      <Button onPress={ this.handeleSaveOrder.bind(this) } block large>Save Order</Button>
    </View>
  )
}

这是子组件＆lt; OrderCalculator＆gt;

renderOrderProducts(){

let products_order = _.map(this.props.products, function(prod){
          if(prod.quantity){
            console.log(prod);
            return (
              <View style={{ flex:1,flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding:10, paddingTop:10, borderWidth: 0.3,  }}>
                <View style={{ flex:2,}}>
                  <Text>{prod.name}</Text>
                </View>
                <View style={{ flex:1,}}>
                  <Text>{prod.quantity} ({ prod.unit})</Text>
                </View>
                <View style={{ flex:1,}}>
                  <Text>{prod.price * +prod.quantity}</Text>
                </View>
              </View>
            )
          }
          else {
          return (
            <View style={{ flex:1,flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding:10, paddingTop:10, borderWidth: 0.3 }}>
              <View style={{ flex:2,}}>
                <Text>{prod.name}</Text>
              </View>
              <View style={{ flex:1,}}>
                <Text>{prod.quantity} ({ prod.unit})</Text>
              </View>
              <View style={{ flex:1,}}>
                <Text>{prod.price * +prod.quantity}</Text>
              </View>
            </View>
          )
        }
  })

  return (
      <View>
        { products_order }
      </View>
    );
  }