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 {

  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)

}

尽管目前number每 10 秒会设置回 0。您需要使用保存为状态的数字。