setState ({}) не меняет мое логическое значение в реагировать родное приложение

Question

Я пытаюсь показать / скрыть свое поле ввода в реакции. Сначала я установил showFilters в состояние «истина», а в своей функции - «ложь» ... вот так ...

hide(){
        console.log("hello");
        this.setState({showFilters: false}); 
      }

вот мой this.state ...

constructor() {

        super();

        this.state = {
            showFilters:true,
            radioButtons: [
            {
              label: 'Freelancer',
              value: 'freelancer',
              checked: true,
              color: '#323232',
              disabled: false,
              onPress: this.hide(),
              size: 11

            },

        {
          label: 'Jobs',
          value: 'jobs',
          checked: false,
          color: '#323232',
          disabled: false,
          size: 11

        },
        {
          label: 'Employer',
          value: 'employer',
          checked: false,
          color: '#323232',
          disabled: false,           
          size: 11   
        } ]

Я хочу скрыть свой макет, когда нажимаю переключатель ...

{ this.state.showFilters   ?
                <TextInput style={{fontSize:17 , height:45}}  editable = {true} placeholder="Hello"></TextInput> : null
            }

терминал показывает приветственное сообщение, но не изменяет состояние .. показывает предупреждение ...

Warning: Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};`

вот код радиокнопки

render(){
        let selectedItem = this.state.radioButtons.find(e => e.checked == true);
        selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;
        return(
            <View style={styles.container}>
            <Header style ={{shadowRadius: 0,shadowOffset: {height: 0,},}}
            backgroundColor="#ff5851"
            androidStatusBarColor="#ff5851"
            leftComponent={{ icon: 'menu', color: '#fff' }}
            centerComponent={{ text: 'Start Your Search', style: { color: '#fff',fontWeight:'500', fontSize:20 , width:'100%',fontSize:20, paddingTop:9 ,display:'flex', flexDirection:'column', alignItems:'center'  , justifyContent:'center' , height:40 , borderRadius:20 , alignSelf:'center' , textAlign:'center'  } }}
              />
            <ScrollView>
            <Text style={{fontWeight: '600' , marginBottom:10 , color:'#323232' ,fontWeight:'500', fontSize:20 , marginLeft:10 , marginTop:10 , marginBottom:15 , marginTop:15 }}>Narrow Your Search</Text>
            <View style={{flexDirection:'column' , backgroundColor:'#fff' , paddingLeft:10}}>
            <View style={{borderBottomColor: '#dddddd', borderBottomWidth: 0.6 , marginLeft:-10  , marginBottom:10}}/>
            <Text style={{ marginBottom:10 }}>Narrow Your Search</Text>
            <RadioGroup style={{marginBottom:10 , flexDirection:'row'}}
            color='#ff5851'
            labelStyle={{ fontSize: 14, }}
            radioButtons={this.state.radioButtons}
            onPress={radioButtons => this.setState({ radioButtons })}
            style={{ paddingTop: 20 }}
            />

Answer 1

Сначала избавьтесь от onPress: this.hide() в вашем конструкторе.Вот так:

super();
        this.state = {
          showFilters:true,
          data: [
          {
            label: 'Freelancer',
            value: 'freelancer',
            checked: true,
            color: '#323232',
            disabled: false,
            size: 11

          },

          {
            label: 'Jobs',
            value: 'jobs',
            checked: false,
            color: '#323232',
            disabled: false,
            size: 11

          },
          {
            label: 'Employer',
            value: 'employer',
            checked: false,
            color: '#323232',
            disabled: false,           
            size: 11   
          } ],
        };

Затем напишите функцию onPress вместо функции hide

onPress = data => {
  let selectedButton = data.find(e => e.selected == true);
  selectedButton = selectedButton ? selectedButton.value : 
     this.state.data[0].label;

  if (selectedButton === 'freelancer') {
    this.setState({ data, showFilters: false });
  } else {
    this.setState({ data, showFilters: true });
  }
}

Последняя в вашей функции рендеринга попробуйте это:

<RadioGroup style={{marginBottom:10 , flexDirection:'row'}}
        color='#ff5851'
        labelStyle={{ fontSize: 14, }}
        radioButtons={this.state.data}
        onPress={this.onPress}
        style={{ paddingTop: 20 }}
/>

Код работает намоя машина.Когда вы нажмете на кнопку радиоприемника фрилансера, showfilter изменится на ложное значение.

Просто попробуйте.

Answer 2

Вы можете позвонить setState с обратным вызовом и перейти в предыдущее состояние:

setState(prevState => {
   showfilter: !prevState.showFilters
})

Answer 3

S.Hasjmi

constructor() {

        super();

        this.state = {
            radioButtons: [
            {
              label: 'Freelancer',
              value: 'freelancer',
              checked: true,
              color: '#323232',
              disabled: false,
              onPress: this.hide(),
              size: 11

            },
            // your code ......
           ]
         }
    this.showFilters = true
   }

hide(){
        this.showFilters =  false
      }

и макет как

{ this.showFilters   ?
                <TextInput style={{fontSize:17 , height:45}}  editable = {true} placeholder="Hello"></TextInput> : null
            }

попробуйте с этим.showFilters

спасибо

Answer 4

Измените onPress: this.hide(), на onPress: this.hide. Вы пишете onPress: this.hide(), поэтому вызываете this.hide () в конструкторе.