Попытка настроить часы обратного отсчета на указанную c дату с обратным отсчетом, js в реакции

Question

У меня это почти работает, однако моя функция setInterval не будет устанавливать setState внутри компонента willMount, я не могу понять, почему this.setstate возвращает ошибку, а не функцию. Вот мой код, любая помощь будет принята с благодарностью.

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import countdown from "countdown"

class Timer extends React.Component{
  constructor(props){
    super(props)
    let time = countdown( new Date(2021, 4, 28) );
    this.state = {
      timeLeft: time.toString()
    }

  }


  componentWillMount(){
    const countyCount = setInterval(function(){
      let timeLeft = countdown( new Date(2020, 4, 28) );
      this.setState(timeLeft.toString())
    }, 1000)

  }

  render() {
    const {timeLeft} = this.state
    return <span>{timeLeft}</span>
  }
}

const IndexPage = () => {


  return(
    <Layout>
      <SEO title="Home" />
      <Timer/>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Link to="/page-2/">Go to page 2</Link>
    </Layout>
  )
}


export default IndexPage

Answer 1

Вы используете function, который меняет область действия, а не устанавливает ключ для this.setState. Правильный путь будет:

const countyCount = setInterval(() => {
  let timeLeft = countdown( new Date(2020, 4, 28) );
  this.setState({timeLeft: timeLeft.toString() })
}, 1000)