Question

问题非常简单但解决方案非常混乱。

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

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

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（）后确保随机数不会多次更改？

Answer 1

您是否需要将随机生成的号码分配给州？你能把它分配给this.randomNumber还是什么？它在反应类中仍然可用，但不会导致重新渲染

这样的事情：

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;

Answer 2

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

只需使用

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

Answer 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：codepen

如何在本机中每秒生成一次随机数？

3 个答案: