React Component 장착하지 않았 음

Question

양식을 렌더링하는 반응 요소에 문제가 있습니다. 기본적으로 카운트 다운 페이지에 들어가면 양식이 작동하지 않습니다. (즉, 전혀 작동하지 않는다는 의미로, 예를 들어 2 분 3 초이며 아무 것도 일어나지 않습니다.) 그러나 예를 들어, 메인 페이지로 이동하여 카운트 다운 페이지로 돌아 가면 작동합니다. 이 페이지를 처음 입력 할 때 componentWillMount는 작동하지만 componentDidMount는 그렇지 않습니다 (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; 

내가 문제를 해결 한

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

Countdown.jsx. 주요 문제는 오류입니다 : "잡히지 않은 오류 : Stateless 함수 구성 요소가 참조를 가질 수 없습니다. at invariant". 문제는 상태 비 저장 구성 요소 때문에 발생했습니다. 그래서 Main.jsx 및 Nav.jsx에서 arrow 함수를 사용하는 대신 React.createClass ({})를 사용했습니다.