CODEWITHSUNDEEP
reactjsreact-native
Fran
Fran

Reputation: 203

RN - setState is saving slider value +1

I'm saving the value of the sliders in this.state.primerNumero and this.state.segundoNumero, and I want the slider value to add +1 or decreasing -1. but sometimes they don't get the correct value.

why is that? Thank you!

Full code: https://demo.firepad.io/#CkvFPfibRa

export default class T4Ej3 extends Component{

  constructor(props){
    super(props);

    this.state = {
      primerNumero: 0,
      segundoNumero: 0,
      suma: 0,
      resta: 0,
      multiplicacion: 0
    }
  }

  cambiarValores(numero){
    this.setState({
      suma: this.state.primerNumero + this.state.segundoNumero,
      resta: this.state.primerNumero - this.state.segundoNumero,
      multiplicacion: this.state.primerNumero * this.state.segundoNumero
    })
  }

  cambiarPrimerNumero(numero){
    console.log("numero")
    console.log(numero)
    this.setState({primerNumero:numero})
    console.log("primerNumero")
    console.log(this.state.primerNumero)
    this.cambiarValores()
  }

  cambiarSegundoNumero(numero){
    this.setState({segundoNumero:numero})
    this.cambiarValores()
  }

  render(){
    return(
      <View style={{alignItems: "center", paddingTop: 200}}>
        <Text>Primer numero es {this.state.primerNumero}</Text>
        <Slider
          style={{width: 200, height: 40}}
          minimumValue={0}
          maximumValue={100}
          minimumTrackTintColor="green"
          maximumTrackTintColor="red"
          onValueChange={(numero) => this.cambiarPrimerNumero(numero)}
          step={1}
        />
        <Text>Segundo numero {this.state.segundoNumero}</Text>
        <Slider
          style={{width: 200, height: 40}}
          minimumValue={0}
          maximumValue={100}
          minimumTrackTintColor="orange"
          maximumTrackTintColor="blue"
          onValueChange={(numero) => this.cambiarSegundoNumero(numero)}
          step={1}
        />
      </View>
    );
  }
}

Upvotes: 0

Views: 121

Answers (1)

Lenoarod
Lenoarod

Reputation: 3620

React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. this is the wrong way:

 cambiarValores(numero){
    this.setState({
      suma: this.state.primerNumero + this.state.segundoNumero,
      resta: this.state.primerNumero - this.state.segundoNumero,
      multiplicacion: this.state.primerNumero * this.state.segundoNumero
    })
  }

try to fix it use the following way:

cambiarValores(numero){
    this.setState((state,props) => {
      suma: state.primerNumero + state.segundoNumero,
      resta: state.primerNumero - state.segundoNumero,
      multiplicacion: state.primerNumero * state.segundoNumero
    })
  }

because this.setState is async, you shoud not call a setState again immately after you call setState., which it has related value. you can try to use this.setState callBack.

cambiarPrimerNumero(numero){
    console.log("numero")
    console.log(numero)
    this.setState({primerNumero:numero}, this.cambiarValores())
  }

but I suggestd you modify the method. make it in one setState.

cambiarPrimerNumero(numero){
    console.log("numero")
    console.log(numero)
    this.setState((state,props) => {
      primerNumero:numero
      suma: numero + state.segundoNumero,
      resta: numero - state.segundoNumero,
      multiplicacion: numero * state.segundoNumero
    })
  }

  cambiarSegundoNumero(numero){
   this.setState((state,props) => {
      segundoNumero:numero
      suma: state.primerNumero + numero,
      resta: state.primerNumero - numero,
      multiplicacion: state.primerNumero * numero
    })
  }

Upvotes: 1

Related Questions