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

Question

例如，我想每 10 秒运行一次我的方法“getNumber”，我该怎么做？

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 {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; web3: "",&nbsp; &nbsp; &nbsp; number: 0&nbsp; &nbsp; };&nbsp; &nbsp; this.getNumber = this.getNumber.bind(this);&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; setInterval(this.getNumber, 10000);&nbsp; }&nbsp; getNumber() {&nbsp; &nbsp; this.setState({ number: this.state.number + 1 });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; <div>Number: {this.state.number}</div>&nbsp; &nbsp; &nbsp; &nbsp; <span>👆This will update every 10 seconds</span>&nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; );&nbsp; }}export default App;现场演示

Answer 2

在里面componentDidMount你可以启动一个setInterval- 它需要 2 个参数，一个要调用的方法，以及它在再次运行之前等待的时间（以毫秒为单位）。https://reactjs.org/docs/react-component.html#componentdidmounthttps://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setIntervalcomponentDidMount() {&nbsp; setInterval(() => {&nbsp; &nbsp; let number = 0;&nbsp; &nbsp; number = number + 1;&nbsp; }, 10000)}尽管目前number每 10 秒会设置回 0。您需要使用保存为状态的数字。