Rendu conditionnel sur les éléments du sélecteur de base natif [React Native]

Question

J'utilise des composants 'Native Base' pour notre produit et ça va bien, mais je suis coincé à un moment donné et il met des éléments dans Nativebase Cueilleur. Mon code est comme ce

Rendu Code de la méthode -

render(){ 

    return (

     <View style={{marginTop: 20, flexDirection:'row', flexWrap:'wrap', justifyContent:'space-around', alignItems:'center'}}> 

     <View style={{flex:1, justifyContent:'center', alignItems:'flex-end' }}> 
      <Button 
      style={{ backgroundColor: '#6FAF98', }} 
      onPress={this._showDateTimePicker} 

      > 
      <Text>Select Date</Text> 
      </Button> 
     </View> 

     <View style={{flex:1, justifyContent:'center', alignItems:'stretch'}}> 
      <Picker 
       style={{borderWidth: 1, borderColor: '#2ac', alignSelf:'stretch'}} 
       supportedOrientations={['portrait','landscape']} 
       iosHeader="Select one" 
       mode="dropdown" 
       selectedValue={this.state.leaveType} 
       onValueChange={(value)=>this.setState({leaveType:value,}) 
       //this.onValueChange.bind(this) 
       }> 

       <Item label="Full Day" value="leave1" /> 
       { 
       this.showStartDateFirstHalf() // Here I want to show this picker item on the basis of a condition 
       } 
       <Item label="2nd half" value="leave3" /> 
     </Picker> 
     </View> 
     <DateTimePicker 

      isVisible={this.state.isStartDatePickerPickerVisible} 
      onConfirm={this._handleDatePicked} 
      onCancel={this._hideDateTimePicker} 
      mode='date' 
     /> 

     </View> 



    ); 


} 

showStartDateFirstHalf() 
{ 
    if(!this.state.isMultipleDays) 
    { 
     return(
      <Item label="1st Half" value="leave2" /> 
    ); 
    } 
} 

Ainsi, ce code fonctionne très bien si this.state.isMultipleDays est faux, mais quand this.state.isMultipleDays est vrai, cela signifie que lorsqu'il est en partie else alors je suis obtenir cette erreur -

Cannot read property 'props' of undefined

Answer 1

Je pense qu'il ya une réponse facile à cela. Au lieu de créer la fonction showStartDateFirstHalf séparée() essayez ceci:

render() { 

    const pickerItems = [ 
    { 
     label: 'Full Day', 
     value: 'leave1', 
    }, 
    { 
     label: '1st Half', 
     value: 'leave2', 
    }, 
    { 
     label: '2nd Half', 
     value: 'leave3', 
    }, 
    ]; 

    const filteredItems = pickerItems.filter(item => { 
    if (item.value === 'leave2' && this.state.isMultipleDays) { 
     return false; 
    } 
    return true; 
    }); 

    // The 'return' statement of your render function 
    return (
    ... 
    <Picker ...> 
     {(() => 
     filteredItems.map(item => 
      <Item label={item.label} value={item.value} /> 
    )()} 
    </Picker> 
    ... 
); 
} 

De cette façon, vous avez déjà une liste d'éléments qui est déterminée avant l'instruction return du cycle de rendu. En outre, l'utilisation de filter au lieu de map ne vous donnera pas seulement null comme deuxième élément si la condition n'est pas remplie, mais supprimera complètement l'élément.