问题很简单,但解决方案却很困惑。
我当前的实现是生成 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() 后随机数不会多次变化?
最佳答案
是否需要将随机生成的数字分配给state?你可以将它分配给 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;
关于javascript - 如何在 native react 中每秒生成一次随机数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49258485/