如何在本机反应中每秒仅生成一次随机数？答案

【问题标题】：How to generate random number only once every seconds in react native?如何在本机反应中每秒仅生成一次随机数？
【发布时间】：2018-03-13 14:14:20
【问题描述】：

这个问题很简单，但解决方案却很混乱。

我目前的实现是生成 50 到 100 之间的随机数并使用 this.setState({...}) 保存它，然后在我的渲染方法中调用它。

但问题是随机方法本身会多次生成随机数。这是因为每次调用 this.setState({...}) 时，render 方法都会渲染几次，并且在此渲染期间，随机数会发生变化，这不是我想要的。

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>
    )
  }
}

如何确保调用 setState() 后随机数不发生多次变化？

【问题讨论】：

一个原始的解决方案：你可以试试这个：this.setState(() => {return {randomNumber: generateRandomNumber(50, 100)}; })

标签： javascript reactjs react-native random react-native-android

【解决方案1】：

你需要将随机生成的数字分配给状态吗？你能把它分配给this.randomNumber 什么的吗？它在 react 类中仍然可用，但不会导致重新渲染

类似这样的：

export default class exampleComponent extends Component {
  constructor() {
    super()
    this.randomNumber = 0

    this.generateRandomNumber = this.generateRandomNumber.bind(this)

  }

  newRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min; 
  }

  generateRandomNumber(){
    setTimeout(() => {
      this.randomNumber = this.newRandomNumber(1, 1000)
    }, 20000)
  }



  myview = () => {

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

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

尝试 2：

我已经使用 javascript 来获取元素并更新 innerHtml 而无需重新渲染整个组件：

class App extends Component {

  constructor() {
    super()
    this.randomNumber = 0

    this.generateRandomNumber = this.generateRandomNumber.bind(this)
  }

  componentDidMount(){
    this.generateRandomNumber() // calls it the first time and the setInterval will keep running
  }

  newRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min; 
  }

  generateRandomNumber(){
    setInterval(() => {
      document.getElementById("randomNumber").innerHTML = this.newRandomNumber(1, 1000)
    }, 1000)
  }

  render() {

    return (
      <div className="App">

        <div id="randomNumber"></div>

      </div>
    );
  }

}

export default App;

【讨论】：

如果有一种方法可以在不使用 setstate 的情况下获取随机数，那么我一定会采用该方法
我知道你在做什么。尽管您部分正确，但一个问题是 this.randomNumber 每隔几秒钟就不会返回新值。它只从构造函数中的第一次调用返回
@Katie 是的，你是对的。我给了你第二个我测试过的例子。希望这能解决您的问题。
嗯，我不认为我可以在 react native 中弄乱内部 html
抱歉，没有意识到它是 react-native。是否有更新文本值的等价物？

【解决方案2】：

为什么你使用 setInterval() 这个方法会继续给你随机数，这不是我所理解的你想要的？

随便用

setTimeout(function() {
      //your code to be executed after x seconds
    }, delayInMilliseconds);`

【讨论】：

【解决方案3】：

试试这个。

class Comp extends React.Component {
state = {
      randomNumber: 0
 }

 generateRandomNumber = (min, max) => { 
    const random = (Math.floor(Math.random() * (max - min + 1)) + min)
    console.log("random ", random)
    this.setState({
      randomNumber: random
    })
   }

  render() {
    setTimeout(this.generateRandomNumber.bind(this, 50, 100),1000)
    return(
      <div>
        {this.state.randomNumber}
       </div>
    )
  }
}

代码笔：codepen

【讨论】：