Компонент не перерисовывается - PullRequest
1 голос
/ 12 апреля 2020

Я новичок в реакции и пытаюсь реализовать динамический c таймер, встроенный в другой компонент.

Это мой компонент Timer:

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


    async componentDidMount() {
        this.myInterval = setInterval(() => {
            const{seconds} = this.state;

            if (seconds > 0) {
                this.setState(({seconds}) => ({
                    seconds: seconds - 1
                }))
            }

            if (seconds === 0) {
                clearInterval(this.myInterval)
            }
        }, 1000)
    }

    async componentWillUnmount() {
        clearInterval(this.myInterval)
    }

    render() {
        const {seconds} = this.state;
        return (
            <div>
                {seconds === 0
                    ? <Message> Times up! </Message>
                    : <Seconds> {seconds < 10 ? `0${seconds}` : `${seconds}`} </Seconds>
                }
            </div>
        );
    }
}

И вот как таймер встроен в мой другой компонент:

render() {
        // this construction of the variable name for the different timer seconds helps us to render the timer dynamically
        let t = {};
        let a = 1;
        let b = 2;
        let c = 3;
        let d = 4;
        t['timer' + a] = 15;
        t['timer' + b] = 30;
        t['timer' + c] = 30;
        t['timer' + d] = 20;
        return (
                <div>
                   <TimerContainer>
                       <Round> Round {this.state.round} </Round>
                       <Timer seconds={t['timer' + this.state.phaseNumber]}/>
                   </TimerContainer>
                </div>
            )
        }

Я реализовал метод, который надежно изменяет this.state.phaseNumber в компоненте, в который встроен таймер (например, от 1 до 2), и я подумал это вызовет изменение состояния в Timer, так как this.state.phaseNumber определяет this.state.seconds в Timer. Где я ошибся в своих рассуждениях?

РЕДАКТИРОВАТЬ: Я думаю, что я решил проблему. Все, что я сделал, это вынул метод clearInterval () из условия 0 секунд. После этого таймер работал так, как я хотел.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...