React js componentDidUpdate

Question

componentDidUpdate = (prevProps, prevState) => {
if (
prevState.sourceOpt !== this.state.sourceOpt ||
prevState.destOpt !== this.state.destOpt ||
prevState.tripOpt !== this.state.tripOpt ||
prevState.fuelOpt !== this.state.fuelOpt ||
prevState.minKm !== this.state.minKm ||
prevState.Configure?.grossEarnings !== this.state.Configure?.grossEarnings ||
prevState.rateOpt !== this.state.rateOpt ||
prevState.extra_rate_per_km !== this.state.extra_rate_per_km ||
prevState.waitingCharge !== this.state.waitingCharge ||
prevState.wait !== this.state.wait ||
prevState.categoryOpt !== this.state.categoryOpt ||
prevState.modelOpt !== this.state.modelOpt
) {
this.getDestinationCity()
this.getTripBasedOnCity()
this.getVehicleCategory()
this.getFuelType()
this.props.parentCallback(this.state.Configure?.grossEarnings)
this.getGeneralData()
this.getModelBaseOnCategory()
this.getConfiguration()
this.getAllData()
}
if (prevState.fuelOpt !== this.state.fuelOpt) {
this.getMinKilo()
}
if (prevState.changeFareKm !== this.state.changeFareKm || prevState.changeFare !== this.state.changeFare
) {
this.handleBlur()
}
}      

是否有优化这段代码的方法?我想优化这段代码。无论如何，我可以使这段代码更可读吗?

Answer 1

检查条件方法

public checkCondition(prevState){
return (prevState.sourceOpt !== this.state.sourceOpt ||
prevState.destOpt !== this.state.destOpt ||
prevState.tripOpt !== this.state.tripOpt ||
prevState.fuelOpt !== this.state.fuelOpt ||
prevState.minKm !== this.state.minKm ||
prevState.Configure?.grossEarnings !== 
this.state.Configure?.grossEarnings ||
prevState.rateOpt !== this.state.rateOpt ||
prevState.extra_rate_per_km !== this.state.extra_rate_per_km ||
prevState.waitingCharge !== this.state.waitingCharge ||
prevState.wait !== this.state.wait ||
prevState.categoryOpt !== this.state.categoryOpt ||
prevState.modelOpt !== this.state.modelOpt)
}

采取行动方法

public performActions(){
this.getDestinationCity()
this.getTripBasedOnCity()
this.getVehicleCategory()
this.getFuelType()
this.props.parentCallback(this.state.Configure?.grossEarnings)
this.getGeneralData()
this.getModelBaseOnCategory()
this.getConfiguration()
this.getAllData()
}

现在你的componentDidUpdate将是

public componentDidUpdate (prevProps, prevState) {
if (this.checkCondition(prevState)) {
this.performActions();
}
if (prevState.fuelOpt !== this.state.fuelOpt) {
this.getMinKilo()
}
if (prevState.changeFareKm !== this.state.changeFareKm || 
prevState.changeFare !== this.state.changeFare) 
{
this.handleBlur()
}
}