Блог

Я пытаюсь создать компонент таймера таким образом, чтобы он отмечался только в том случае, если логическая переменная isRunning имеет значение true. Это похоже на учебник react basic: https://reactjs.org/docs/state-and-lifecycle.html

Но по какой-то причине моя функция didmount возвращает ошибку «Ожидал вызова назначения или функции, а вместо этого увидел выражение».

Если бы кто-нибудь мог сказать мне, что я делаю не так, это было бы здорово.

Вот мой код:

 import React , { Component } from 'react';

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


    componentDidMount() {
        {
            {this.props.isRunning ? this.myInterval = setInterval(() => 
                { this.tick()}, 1000) : null}
        }
    }

    tick() {
        this.setState({
            count: this.state.count   1
        })

    }

    
    render () {
        {
            var hour = Math.floor(this.state.count/3600),
            minutes = Math.floor((this.state.count - hour*3600)/60),
            seconds = (this.state.count - hour*3600 -minutes*60 ),
            temp = new Date(); 
            temp.setHours(hour, minutes, seconds);
        }
        
        return(
            <div>
                {temp.getHours()}:{temp.getMinutes()}:{temp.getSeconds()}
            </div>
        );
    }
}

export default Timer;
 

Я на 100% уверен, что проблема возникает из-за моей функции componentDidMount.

Вы неправильно используете условный оператор.

Это формат : Условие ? Возвратная истина : возвратный результат

 
componentDidMount() {
        this.myInterval = this.props.isRunning ? setInterval(() => 
                { this.tick()}, 1000) : null
        
    }