在 React 展示组件中以设定的时间间隔调用函数 [重复]

Question

我正在尝试在我的 presenational React 组件中使用 moment.js 实现滴答计时器。作为第一步，我只想每秒调用一个函数，但我没有得到函数应该返回的文本，而是得到一个 int 值。

知道我应该如何实现吗？

这是我的组件：

import React, { PropTypes } from 'react';
import moment from 'moment';

const tickingTimer = () => {

   return "00:02:48";
}

const MyComponent = () => {

   return(
      <div>
         <div>{setInterval(tickingTimer(), 1000)}</div>
      </div>
   );
}

export default MyComponent;

当React 呈现页面时，我看到的不是00:02:48，而是上升了3 倍的int 值，例如20、21、22

如何在我的展示组件中调用每秒返回一个值的函数？

Answer 1

原因是 setInterval 返回一个 timerId，您可以稍后使用它来清除间隔。

需要将函数的返回值保存在状态

import React, { PropTypes } from 'react';
import moment from 'moment';

const tickingTimer = () => {

   return "00:02:48";
}

const MyComponent class extends React.Component {
   state = { 
      timer: ''
   }
   componentDidMount(){
       setInterval(tickingTimer, 1000)
   }

   tickingTimer = () => {

     this.setState({timer:"00:02:48"});
    }
   return(
      <div>
         <div>{this.state.timer}</div>
      </div>
   );
}

export default MyComponent;