Выполнение флажка First onchange работает неправильно функция React Native Help, пожалуйста - PullRequest
Новая
       38

Выполнение флажка First onchange работает неправильно функция React Native Help, пожалуйста

1 голос
/ 04 августа 2020

При первом выполнении моя функция не работает. Мне нужен флажок для добавления или вычитания чисел. но это не работает при первом запуске, только при следующих. console.log () работает, но добавляет или вычитает только при втором запуске. 

  
  constructor(props) {
    super(props);
    this.state = {
      valOp1: false,
      cotacao: 0.0,
      cont: 1,
    };
  }

  op1 = value => {{
    this.setState({ valOp1: !this.state.valOp1}); 
    if(this.state.valOp1 == true){
      console.log('selected');
      this.setState({ cotacao: this.state.cotacao + 10});
      console.log(this.state.cotacao);
    }
    else if(this.state.valOp1 == false){
      console.log('not selected');
      this.setState({ cotacao: this.state.cotacao - 10});
      console.log(this.state.cotacao);
    }  
  }
  this.funcop1();
}
  funcop1(){
       
  }

  render(){
    return(
    <View>
    <TextInput
    label="Valor Fipe"
    value={this.state.val}
    maxLength={11}
    keyboardType="numeric"
    onChangeText= {(val) => this.setState({val})}
    />
    <View style={styles.container}>
      <Text style={styles.checkTitle}>Opcionais:</Text>
      <View style={styles.checkboxContainer}>
       <CheckBox
         value={!!this.state.valOp1}
         onValueChange={this.op1}
         style={styles.checkbox}
        />
        <Text style={styles.label}>Do you like React Native?</Text>
      </View>
    </View>
    </View>
    );
  }
}```

1 Ответ

0 голосов
/ 04 августа 2020

Вы не можете вызвать setState и ожидать, что состояние изменится немедленно, потому что setState асинхронный. Просто вычислите новое состояние .valOp1 и используйте это значение для вычисления котакао, а затем установите состояние один раз. 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      valOp1: false,
      cotacao: 0.0,
      cont: 1,
    };
  }

  op1 = () => {
    //calculate new value of valOp and cotacao first
    const valOp1 = !this.state.valOp1;
    const cotacao = valOp1
      ? this.state.cotacao + 10
      : this.state.cotacao - 10;
    //just set the state once
    this.setState({ valOp1, cotacao });
  };

  render() {
    return (
      
        
        
          {JSON.stringify(this.state, undefined, 2)}
); }} ReactDOM.render ( , document.getElementById ('root')); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...