javascript - react 计时器如何实现定时任务来从数据库去数据并放在state中

Question

我现在有赢组件，是从数据库中取得数据，并通过state状态存放

callGetMvnDataPackageLogFn(orderCodeData).then((res) => {
      this.setState({ data: res.data });
    });

我现在想要给这个添加一个计时器去定时请求数据，我自己使用的是：

const intervals = stInterval(function(){
  callGetMvnDataPackageLogFn(orderCodeData).then((res) => {
    this.setState({ data: res.data });
  });
},200)

但是这并不行，请问该如何写？

Answer 1

React官网首页的定时器例子,自己琢磨下！

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <p>Seconds Elapsed: {this.state.secondsElapsed}</p>
    );
  }
}

ReactDOM.render(<Timer />, mountNode);

Answer 2

计时器要在componentDidMount生命周期方法挂上，然后在componentWillUnmount生命周期方法清除。

下面是ES6(Class)的语法范例:

  componentDidMount() {

    //this.timer = setInterval(this.tick.bind(this), 50); //或
    this.timer = setInterval(() => this.tick(), 50);
  }
  componentWillUnmount() {
     clearInterval(this.timer);
  }

  tick() {
    // 每50ms执行一次

    this.setState({
      elapsed: new Date() - this.props.start
    });

  }

这个范例是参考自: https://codepen.io/cmymikechu...