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

Question

[Григорий Дикий]

Здравствуйте, не понимаю, что я делаю неверно. Есть компонент в котором прописаны свойства: 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)}
        />
    );
  }
}

Answer 1

[nd0ut]

А где и как вызывается updateTime? Может быть Вы в неё не прокинули контекст текущего компонента и она вызвается в контексте чего-то другого? На что указывает this внутри updateTime?

Comments

[Григорий Дикий]

оно передается в этом же классе следующим образом: this.timer.start(this.updateTime.bind(this)); - то есть контекст привязан. Сама функция updateTime вызывается в классе таймера как callBackTime:

update() {
    if(this.currentTime === 0) this.stop();
    else this.currentTime--;
    this.callBackTime(this.currentTime);
  }

[Григорий Дикий]

Возникает такое ощущение, что оно сохраняет предыдущий контектс

[nd0ut]

Григорий Дикий: Посмотрите дебаггером, что там вообще происходит. Поставьте бряку внутри updateTime и посмотрите, какой контекст, в стектрейс загляните. Может быть контекст верный и forceUpdate вызывается, но почему-то эффекта нет. Дебаггер здесь - Ваш верный помощник. И вообще, forceUpdate использовать не стоит, если можно без него обойтись.

[Григорий Дикий]

Я просто не хотел загружать state ненужными вещами. Такое ощущение, что при возвращении обратно получается заново инициализация таймера, а прежде у тамймер живет своей жтзнью, так как даже в componentWillmount я вызываю this.tumer.stop(), а эффекта ноль, то есть clearInterval() получает совсем другую переменную

[Григорий Дикий]

nd0ut: Я посмотрел, в общем там заново выделяется память и собственно конструктор заново отрабатывает в чем собственно и была ошибка

Answer 2

[Максим]

"Вернулся обратно" => componentWillMount (скорее всего, либо вы как-то хитро "возвращаетесь обратно")
Чтобы посмотреть, происходит mount/unmount и как - просто напишите console.log('mount') и console.log('unmount') соотвественно, а потом "походите" и "повозвращайтесь". Думаю все встанет на свои места.

Comments

[Григорий Дикий]

вот именно, что я смотрел, что происходит mount и unmount и даже свойство менялось, но в callBack функции оно осталось прежним

[Григорий Дикий]

Код класса:

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;
    console.log(this.mount);
  }

  componentWillUnmount() {
    this.mount = false;
    console.log(this.mount);
  }

  startTimer(e) {
    this.props.start();
    this.timer.start(this.updateTime.bind(this));
  }

  startBreak(e) {
    this.props.startBreak();
    this.timer.start(this.updateTime.bind(this))
  }

  finishTimer() {
    this.notification.play();
    this.props.finish();
    this.timer.setTime(this.props.shortBreak);
    this.props.newTask(
      'test',
      this.props.sessionTime,
      createNowDate()
    );
  }

  finishBreak() {
    this.props.finishBreak();
    this.timer.setTime(this.props.timeout);
  }

  tickTimer() {
    this.props.tickTimer();
  }

  skipTimer(e) {
    this.props.skip();
    this.timer.stop();
    this.timer.setTime(this.props.timeout);
  }

  pauseTimer(e) {
    this.props.pause();
    this.timer.pause();
  }

  resumeTimer() {
    this.props.resume();
    this.timer.resume();
  }

  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)}
        />
    );
  }
}

const mapStateToProps = ({ timer, settings }) => ({
  status: timer.status,
  prevStatus: timer.prevStatus,
  timeout: settings.timeout,
  shortBreak: settings.shortBreak
});

const mapDispatchToProps = (dispatch) => ({
  start: () => dispatch(startTimer()),
  finish: () => dispatch(finishTimer()),
  tickTimer: () => dispatch(tickTimer()),
  skip: () => dispatch(skipTimer()),
  pause: () => dispatch(pauseTimer()),
  resume: () => dispatch(resumeTimer()),
  startBreak: () => dispatch(startBreak()),
  finishBreak: () => dispatch(finishBreak()),
  newTask: (name, time, date) => dispatch(createNewTask(name, time, date))
});

export default connect(mapStateToProps, mapDispatchToProps)(TimerContainer);

Код таймера:

export default class Timer {
  constructor(currentTime, fullTime) {
    this.fullTime = fullTime;
    this.currentTime = currentTime;
    this.interval = undefined;
    this.callBackTime = undefined;
  }

  start(callBackTime) {
    this.currentTime = this.fullTime;
    this.callBackTime = callBackTime;
    this.interval = setInterval(this.update.bind(this), 1000);
  }

  setTime(time) {
    this.fullTime = time;
    this.currentTime = 0;
  }

  update() {
    if(this.currentTime === 0) this.stop();
    else this.currentTime--;
    this.callBackTime(this.currentTime);
  }

  stop() {
    clearInterval(this.interval);
    this.currentTime = 0;
    this.fullTime = 0;
  }

  pause() {
    clearInterval(this.interval);
  }

  resume() {
    this.interval = setInterval(this.update.bind(this), 1000);
  }

  getFullTime() {
    return this.fullTime;
  }

  getCurrentTime() {
    return this.currentTime;
  }
}

Не могу понять, вижу что меняется в функциях жизненного цикла, но callBack функция не подхватывает изменения, если вернуться обратно к компоненту

Answer 3

[Григорий Дикий]

Компонент заново выделялся при переходе на вкладку с ним из-за чего срабатывает заново конструктор и соответственно прежний контекст теряется и таймер перераспределяется заново.