Question

componentWillReceiveProps在我的下面代码中调用了两次。不知道为什么。如何通过调用两次来阻止它？

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

- 我不会理解您的项目流程，尝试上传更多文件，例如相应的action.js和reducer.js。，以下几点可能有帮助....

在componentWillRecieveProps中进行api调用不是一个正确的选择，因为这个生命周期钩子运行多次，每当更新props更新componentWillRecieveProps时。
所以每当mapStateToProps返回状态然后调用componentWillRecieveProps时，你最终会进行多次api调用，这不是一种正确的方式，性能明智。

componentWillReceiveProps在react + redux中调用了两次

1 个答案: