为什么我的箭头功能未定义或不是我的组件中的函数？

Question

我已经创建了一个子组件，我有一个计时器箭头功能。我使用控制台记录带括号和不带括号的函数。当我没有登录时，它告诉我函数未定义。当我用括号记录时，它告诉我该函数不是函数。我怎么能阻止这个？这是代码......

import React from 'react';

class AlertsBox extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      deadline: this.props.deadline,
      activate: this.props.activate,
      eta: Date.parse(this.props.deadline) - Date.now(),
      hora: ""
    };

    this.timer = this.timer.bind(this);
  }


//This is the function!
  timer = () => {
    //Extract the data from the original string
    //Convert the UTC to locale time

    let seconds = Math.round((this.state.eta/1000) % 60);
    let minutes = Math.floor( (this.state.eta/1000/60) % 60 );
    let hours = Math.floor( (this.state.eta/(1000*60*60)) % 24 );
    let days = Math.floor( this.state.eta/(1000*60*60*24) );

    this.setState({
      hora: `${days >= 1? days + " days" : ""} ${hours >= 1? hours + " hrs" : ""} ${minutes} min ${seconds} sec`
    });
  }


  componentDidMount() {
    setInterval(function () {
      this.timer;
      console.log(this.timer);
    }, 1000);
  }

  render() {

    return (
      <section className="alerts">
        <h1 className="alertname">
          {this.props.type.toUpperCase()} // {this.props.sector}
        </h1>
        <figure className="alertreward">
          <img src={this.props.image} alt=""/>
          {this.props.reward ?
            <figcaption>
              {this.props.reward}
            </figcaption>
          : null}
          <figcaption>
            {this.props.credits + " Credits"}
          </figcaption>

        </figure>

        <figure className="alerttimer">
          <canvas>
          </canvas>
          <p>{this.state.thepercent}</p>
          <figcaption>

              {this.state.hora}

          </figcaption>
        </figure>
      </section>
    )
  }
}

export default AlertsBox;