React:如何每10秒执行一个方法

Question

我想运行我的方法"getNumber"例如每10秒我该怎么做？

class App extends Component {
constructor(){
super();
this.state={
web3: '',
}
this.getNumber = this.getNumbert.bind(this);

}
getNumber(){
let number = 0;
number = number + 1;
}

Answer 1

一些建议：

• 使用本机JS函数setInterval()每隔x毫秒运行一个给定函数
• 如果要在每次更改时触发重新渲染，则需要将数字存储在状态中

工作示例：

import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
web3: "",
number: 0
};
this.getNumber = this.getNumber.bind(this);
}
componentDidMount() {
setInterval(this.getNumber, 10000);
}
getNumber() {
this.setState({ number: this.state.number + 1 });
}
render() {
return (
<>
<div>Number: {this.state.number}</div>
<span>👆This will update every 10 seconds</span>
</>
);
}
}
export default App;

实时演示

Answer 2

在componentDidMount内部，您可以启动一个setInterval，它需要2个参数、一个要调用的方法和一个等待时间(以毫秒为单位(才能再次运行。

https://reactjs.org/docs/react-component.html#componentdidmount

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

componentDidMount() {
setInterval(() => {
let number = 0;
number = number + 1;
}, 10000)
}

尽管这将当前每10秒将number设置回0。您可能希望使用另存为状态的数字。