REACT NATIVE - this.setState 在 onChangeText 中不起作用

Question

I'm trying to create a conditional onPress here using a gender selection. If the gender is undefined, I can't go on. Quite simple. But I'm a newbie and I'm not finding the trouble here.

That's the gender prop in state...

  constructor(props) {
super(props);
this.state = {
  gender: ''
};

That's the const genderSelect with these 3 gender values...

render() {
const genderSelected = [
  { value: 'Feminino', label: 'Feminino' },
  { value: 'Masculino', label: 'Masculino' },
  { value: 'Outro', label: 'Outro' }
];

... }

That's my Dropdown class where I call the genderSelect and try to use the setState (but it doesn't work, the 'console.log' keeps returning 'undefined'). And finally, that's my conditional onPress.

 return (
   <>
          <Dropdown
            label='Selecione...'
            data={genderSelect}
            baseColor={"white"}
            textColor={"white"}
            itemColor={"white"}
            pickerStyle={{
              backgroundColor: "black"
            }}
            onChangeText={(value) => {
              this.setState({ gender : value })
              console.log(this.gender)
            }}
          />
            <TouchableOpacity
              style={styles.buttonContainer}
              onPress= {()=>{
                if (this.gender != undefined ) {
                  console.log(this.gender)
                  this.props.navigation.navigate("Abas")
                }
                else {
                  console.log(this.gender)
                  Alert.alert('Ops!','Favor preencher sua idade e gênero antes!');
                }
              }}
            >
              <Text style={styles.buttonText}>CONFIRMAR</Text>
            </TouchableOpacity>

Btw, I suppose the problem ocurrs inside the onChangeText / setState section. No matter how I use 'if / else' afterwards, it keeps returning 'undefined'.

It's probably a simple issue whose cause I didn't get, I know. And I've searched a lot about it, but none of the answers actually helped me. Hope someone can help me.

Answer 1

Replace this.gender with this.state.gender

That's the error.. gender is a state variable so you have to access it like that.

In your return part change this

<TouchableOpacity
    style={styles.buttonContainer}
    onPress={() => {
      if (this.state.gender != undefined) {
        console.log(this.state.gender);
        this.props.navigation.navigate('Abas');
      } else {
        console.log(this.state.gender);
        Alert.alert('Ops!', 'Favor preencher sua idade e gênero antes!');
      }
    }}>
  <Text style={styles.buttonText}>CONFIRMAR</Text>
</TouchableOpacity>