Блог

Задача состоит в том, чтобы создать приложение-бомбу замедленного действия, используя состояние, чтобы определить, является ли текущее значение меньше 8 и делится на 2.

Когда количество меньше 8 и делится на 2, должно отображаться слово «tick». Когда количество не делится на 2, оно должно отображать «ток». Если счетчик становится равным или выше 8, «БУМ !!!»

Я зарегистрировал состояние, чтобы увидеть, как оно устанавливается, и сначала регистрируется начальное состояние 0, отображается слово tick, но сразу после того, как я продолжаю получать NaN в виде журнала и слова BOOM!!!отображается.

     import React from 'react';

class Bomb extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        count: this.count  ,
      });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  displayTickorTock() {
    const currentCount = this.state.count;
    const tick = <p>'tick'</p>;
    const tock = <p>'tock'</p>;
    let tickOrTock;

    if(currentCount % 2 === 0) {
      tickOrTock = tick;
    } else if (currentCount % 2 !== 0) {
      tickOrTock = tock;
    } else {
      tickOrTock = <p>'BOOM!!!!'</p>
    }
    return tickOrTock;
  }

  render() {
    console.log(this.state.count);
    return <div>{this.displayTickorTock()}</div>;
  }
}