Реакция Компонент Не смонтирован

Question

У меня возникла проблема с моим компонентом реакции, который отображает форму. В принципе, когда я ввожу страницу обратного отсчета, форма просто не работает (я имею в виду, что она вообще не действует, я пишу, например, 123, которая составляет 2 мин и 3 секунды, и ничего не происходит, просто ничего). Но, например, если я перейду на главную страницу и вернусь на страницу обратного отсчета, это сработает. Я заметил, что при входе на эту страницу в первый раз компонент componentWillMount работает, но у компонентаDidMount нет (это не будет console.log сообщение). Ссылка на Heroku: http://fathomless-lowlands-79063.herokuapp.com/?#/countdown?_k=mj1on6

CountdownForm.jsx

var React = require('react'); 
var CountdownForm = React.createClass({ 
    onSubmit: function (e) { 
    e.preventDefault(); 
    var strSeconds = this.refs.seconds.value; 
    if (strSeconds.match(/^[0-9]*$/)){ 
     this.refs.seconds.value = ''; 
     this.props.onSetCountdown(parseInt(strSeconds, 10)); 
    } 

    }, 
    render: function() { 
    return(
     <div> 
     <form ref="form" onSubmit={this.onSubmit} className="countdown-form"> 
     <input type="text" placeholder="Enter time in seconds" ref="seconds" /> 
     <button className="button expanded">Start 
     </button> 
     </form> 
    </div> 
    ); 
    } 
    }); 
    module.exports = CountdownForm; 

Countdown.jsx

var React = require('react'); 
var Clock = require('Clock'); 
var CountdownForm = require('CountdownForm'); 
var Controls = require('Controls'); 

var Countdown = React.createClass({ 
    getInitialState: function() { 
    return { 
     count: 0, 
     countdownStatus: 'stopped' 
    }; 
    }, 
    componentDidUpdate: function (prevProps, prevState) { 
    if (this.state.countdownStatus !== prevState.countdownStatus) 
    { 
     switch (this.state.countdownStatus){ 
      case 'started': 
      this.startTimer(); 
      break; 
      case 'stopped': 
       this.setState({count: 0}) 
      case 'paused': 
       clearInterval(this.timer) 
       this.timer = undefined; 
      break; 
     } 
    } 
    }, 
    componentDidMount: function() { 
    console.log("componentDidMount"); 
    }, 
    componentWillMount: function() { 
    console.log("componentWillMount"); 
    }, 
    componentWillUnmount: function() { 
    console.log('componentDidUnmount'); 
    }, 
    startTimer: function() { 
     this.timer = setInterval(() => { 
     var newCount = this.state.count - 1; 
     this.setState({ 
      count: newCount >= 0 ? newCount : 0 
     }); 
     }, 1000); 
    }, 
    handleSetCountdown: function (seconds){ 
    this.setState({ 
     count: seconds, 
     countdownStatus: 'started' 
    }); 
    }, 
    handleStatusChange: function (newStatus) { 
    this.setState({ 
     countdownStatus: newStatus 
    }); 
    }, 
    render: function() { 
    var {count, countdownStatus} = this.state; 
    var renderControlArea =() => { 
     if (countdownStatus !== 'stopped') { 
     return <Controls countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange} /> 
     } else { 
     return <CountdownForm onSetCountdown={this.handleSetCountdown} /> 
     } 

    }; 
    return(
    <div> 
     <Clock totalSeconds={count} /> 
     {renderControlArea()} 
    </div> 
); 
} 
}); 
module.exports = Countdown; 

Answer 1

Я решил эту проблему. Основной проблемой была ошибка: «Неиспользуемая ошибка: компоненты функции без состояния не могут иметь ссылки. при инварианте». Проблема заключалась в компонентах без состояния, поэтому я вместо использования функций стрелок в Main.jsx и Nav.jsx использовал React.createClass ({}).