componentWillReceivePropsがreact + reduxで2回呼び出されました

Question

componentWillReceivePropsが私の下のコードで2回呼び出されました。理由は分かりません。 2回呼び出すことでそれを防ぐ方法は？

export class EmpSearch extends React.Component { 
    constructor(props) { 
super(props); 
this.state = { 
    Empnumber: '' 
}; 
    this.updateEmpNumber = this.updateEmpNumber.bind(this); 
} 

updateEmpNumber(e) { 
    this.props.dispatch({ 
      type: 'UPDATE_EMP_NUMBER', 
      payload: e.target.value 
     }); 
} 

render() { 
return (
    <div className="row"> 
    <form> 
     <div className="form-group"> 
     <label htmlFor="Empnumber">Emp Number</label> 
     <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/> 
     </div> 
    </form> 
    </div> 
); 
} 
} 

function mapStateToProps(state){ 
return{ 
Empnumber: state.Empnumber 
}; 
} 

export default connect(mapStateToProps)(EmpSearch); 

のemp detalsページには、私はcomponentWillReceivePropsを呼び出していますどこ下回っており、これで私はAPIを呼び出し、状態を設定しています。

class EmpDetail extends React.Component { 
    constructor(props) {   
    super(props); 
    this.state = { 
}; 


} 

componentWillReceiveProps(nextProps) { 
    this.GetData(nextProps); 
} 

GetData(props){ 

//Making and API call and Set the state 

} 

render() { 
    const empNumber = this.props.Empnumber; 
    return (
     <div className="container"> 
      Empnumber = {empNumber} 
     </div> 
    ); 
    } 
    } 

function mapStateToProps(state){ 
return { 
    Empnumber: state.Empnumber 
    } 
    } 

export default connect(mapStateToProps)(EmpDetail); 

Answer 1

-Iは、このようなaction.jsやreducer.jsの対応など複数のファイルをアップロードしようと、プロジェクトの流れをundestandいけない。、以下の点が役立つかもしれない....

APIを作る

1. componentWillRecievePropsの呼び出しは、このライフサイクルフックが複数回実行されるため、適切な選択ではありません。

2. したがって、mapStateToPropsが状態を返し、次にcomponentWillRecievePropsが呼び出されると、正しい方法ではなく、パフォーマンス上の理由で複数のAPI呼び出しを行うことになります。