@frilix
Иногда "творю"

ComponentWillMount не изменяет свойство?

Здравствуйте, не понимаю, что я делаю неверно. Есть компонент в котором прописаны свойства: componentWillMount, componentWillUnmount, где просто изменяется свойство this.mount на true или false. Есть callBack функция у таймера которая оперирует этим свойством, но почему-то она не верно считывает this.mount если ты перешел на другой раздел и вернулся обратно ( в логе показывает, что значение this.mount false), хотя я убеждаюсь, что срабатывает componentWillMount и изменяет его, в чем может быть причина?

import React from 'react';
import { connect } from 'react-redux';

import TimerComponent from '../components/TimerComponent';
import { setTime, startBreak, finishBreak, startTimer, finishTimer, tickTimer, skipTimer, pauseTimer, resumeTimer } from '../actions/TimerActions';
import { createNewTask } from '../actions/TaskActions';
import { transformTimeFromSeconds, createNowDate } from '../utils/DateTime';
import { CONST } from  '../constants/TimerConstants';
import Timer from '../utils/Timer';

class TimerContainer extends React.Component {
  constructor(props) {
    super(props);

    this.timer = new Timer(0, this.props.timeout);
    this.notification = new Audio('notification.mp3');
    this.mount = true;
  }

  componentWillMount() {
    this.mount = true;
  }

  componentWillUnmount() {
    this.mount = false;
  }

  ...
  updateTime(time) {
    if(time === 0) this.props.prevStatus === CONST.START_TIMER ? this.finishTimer() : this.finishBreak();
    if(this.mount) this.forceUpdate(); // Функция принудительного рендеринга не вызывается после возвращения из другого раздела
  }

  getTimePrecent() {
    return (this.timer.getFullTime() - this.timer.getCurrentTime()) * 100 / this.timer.getFullTime();
  }

  render() {
    var time = this.props.status === CONST.TICK_TIMER ? this.timer.getCurrentTime() : this.timer.getFullTime();
    var percent = this.getTimePrecent();

    return (
      <TimerComponent
        status={this.props.status}
        time={time}
        percent={percent}
        startTimer={this.startTimer.bind(this)}
        skipTimer={this.skipTimer.bind(this)}
        pauseTimer={this.pauseTimer.bind(this)}
        resumeTimer={this.resumeTimer.bind(this)}
        startBreak={this.startBreak.bind(this)}
        />
    );
  }
}
  • Вопрос задан
  • 271 просмотр
Решения вопроса 3
nd0ut
@nd0ut
А где и как вызывается updateTime? Может быть Вы в неё не прокинули контекст текущего компонента и она вызвается в контексте чего-то другого? На что указывает this внутри updateTime?
Ответ написан
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
"Вернулся обратно" => componentWillMount (скорее всего, либо вы как-то хитро "возвращаетесь обратно")
Чтобы посмотреть, происходит mount/unmount и как - просто напишите console.log('mount') и console.log('unmount') соотвественно, а потом "походите" и "повозвращайтесь". Думаю все встанет на свои места.
Ответ написан
@frilix Автор вопроса
Иногда "творю"
Компонент заново выделялся при переходе на вкладку с ним из-за чего срабатывает заново конструктор и соответственно прежний контекст теряется и таймер перераспределяется заново.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы