mardi 13 mars 2018

How to generate random number only once every seconds in react native?

The question is very simply yet the solution is quite confusing.

My current implementation is that I'm generating random number between 50 to 100 and save it using this.setState({...}) Which I then call it in my render method.

But the gotcha is that the random method in itself generates random number multiple times. This is because every time the this.setState({...}) is called, the render method renders few times and during this rendering, the random number changes, which is not what I want.

export default class exampleComponent extends Component {
  constructor() {
    this.state = {
      randomNumber: 0
    };
  }

  generateRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

  myview = () => {
    const { randomNumber } = this.state;

    setInterval(() => this.setState({randomNumber: generateRandomNumber(50, 100)}), 20000);

    return (
      <View>
        <Text>{randomNumber}</Text>
      </View>
    );
  };
  
  render() {
    return(
      <View>
        {this.myview()}
      </View>
    )
  }
}

How can i ensure that the random number doesnt change multiple times after setState() is called?




Aucun commentaire:

Enregistrer un commentaire