私のケースでは、コンポーネントの状態をpropsに設定する方法は？

Question

私が反応学んでいると私は自分自身が私の研究を追跡するためのアプリケーションを作成しています。すべてうまく動作します。私のアプリケーションで

私は状態に小道具を渡すために持っている中で、クラスベースのコンポーネントを持っています。しかし、私は、潜在的にどこかで州を変えることができるので、クラスベースのコンポーネントで州に小道具を渡すべきではないことを学びました。しかし私は、私のように州に小道具を渡さずに自分のコードを動作させる方法を知らない。私は自分自身を勉強しているので、インストラクターが質問する必要はありません。したがって、StackOverflowは私の最高の家庭教師です。ご協力いただきありがとうございます。

これは私のcode.Iは、以下の回答に応じてそれを変更し、それが今で正常に動作しますが、私は変更したり、自分のコードに避けなければならないものがあるのですか？

import React from 'react'; 
import SubjectFrom from './SubjectForm'; 
import {startSubject} from '../actions/subjectAction'; 
import {connect} from 'react-redux'; 

class BeginSubject extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 
      timeRun:0, 
      onFinish:'', 
      buttonChange:'start', 
      timer:null 
     } 
    } 

    componentWillMount(){ 
     this.setState({timeRun:this.props.subject?this.props.subject.hour*60*60+this.props.subject.minute*60:0,}); 
    } 

    componentWillUnmount(){ 
     let hour = Math.floor(this.state.timeRun/(60 * 60)); 
     let minute= Math.floor((this.state.timeRun % (60 * 60))/60); 
     this.onPause(); 
     if(this.props.subject){ 
      this.props.dispatch(startSubject(this.props.subject.id,{hour,minute})) 
      console.log(this.props.subject.id) 
     } 
    } 

    onStart=()=>{ 
     clearInterval(this.timer) 
     this.timer = setInterval(()=>{ 
      let count=this.state.timeRun 
      count-- 
      if(count<0){ 
       this.setState({onFinish:'well Done'}) 
       clearInterval(this.timer); 
       return; 
      } 
       let hourleft = Math.floor(count/(60 * 60)); 
       let minuteleft = Math.floor((count % (60 * 60))/60); 
       let secondleft = count % 60; 

       this.setState({onFinish:`you have ${hourleft} hour ${minuteleft} minute and ${secondleft} second until reaching your goal`}); 
       this.setState({timeRun:count}) 
     },1000) 
    } 

    onPause=()=>{ 
     clearInterval(this.timer) 
     let time = this.props.subject?this.props.subject.hour*60*60+this.props.subject.minute*60:0; 
     if(this.state.timeRun<time){ 
      this.setState({buttonChange:'resume'}) 
      return; 
     } 
    } 

    onReset=()=>{ 
     const resetConfirm=confirm('you have not finished, do you want to reset?') 
     if(resetConfirm===true){ 
      clearInterval(this.timer) 
      this.setState({timeRun:this.props.subject?this.props.subject.hour*60*60+this.props.subject.minute*60:0, 
          onFinish:'', 
          buttonChange:'start', 
          timer:null}) 

     } 
    } 

    render(){ 
     return(
      <div> 
       <p>{this.props.subject?this.props.subject.subjectName:'there is nothing to do for now'}</p> 
       <p>{this.props.subject?`you have ${this.props.subject.hour} hour and ${this.props.subject.minute} minute to work`:'there is no time set'}</p> 
       <button onClick={this.onStart}>{this.state.buttonChange}</button> 
       <button onClick={this.onPause}>pause</button> 
       <button onClick={this.onReset}>reset</button> 
       <p>{this.state.onFinish}</p> 
      </div> 
     ) 
    } 
}; 

const mapStateToProps=(state,props)=>{ 
    return{ 
     subject:state.subjects.find((subject)=>subject.id===props.match.params.id) 
    }; 
} 
export default connect(mapStateToProps)(BeginSubject) 

Answer 1

は、このためにcomponentWillMount（）のライフ・サイクル・メソッドを使用します。瞬時値は0に設定されます。 componentWillMount（）は時刻と状態を計算します。コンポーネントが初めてロードされたときにのみ実行されます。それ以外の場合はcomponentWillRecieveProps（）を使用します。

免責：componentWillMount（）のみ習慣子コンポーネントに反映される小道具に一度と更新を実行します。

this.state={ 
     timeRun:0, 
     onFinish:'', 
     buttonChange:'start', 
     timer:null 
    } 


componentWillMount(){ 
    this.setState({timeRun:this.props.subject?this.props.subject.hour*60*60+this.props.subject.minute*60:0,}); 
} 

私は示唆した方法でも小道具を設定することは常に悪い習慣を覚えています。最良の方法は、子コンポーネントにを小道具として計算した値を送信になります。 this.props.timeRunを使用します。このは、不要なループと更新を防ぐことができます。

Answer 2

ライフサイクルメソッドのcomponentWillReceiveProps（）に配置することをお勧めします。そこでは、状態を小道具と同期させる必要があるときとそうでないときを管理することができます。