I am trying to setState inside componentWillUpdate
But it is giveing me error saying this.I don't know why.
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
This is how I am trying to do.
class DispensingIncidents extends React.Component {
constructor(props) {
super(props);
this.state = {
timeSpan: "",
year: 2020,
tabValue: "",
spanData: [],
dataType: "",
durationList: "",
durationLabel: "",
dataTo: "",
dataFrom: "",
incidencesSection: false,
overViewSelect: "",
selectTab: 0,
};
}
componentDidMount() {
this.props.getFilterData(this.state.year);
this.props.getDuration(this.state.year);
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (
prevProps.dispensingData.duration !== this.props.dispensingData.duration
) {
this.props.getOverviewData(
Object.keys(this.props.dispensingData.period)[3],
this.props.dispensingData.duration.monthly[0].period.to,
this.props.dispensingData.duration.monthly[0].period.from,
Object.keys(this.props.dispensingData.type)[0],
this.props.dispensingData._reference
);
this.setState({
timeSpan: Object.keys(this.props.dispensingData.period)[3],
dataType: Object.keys(this.props.dispensingData.type)[0],
});
}
}
componentWillReceiveProps() { < ---- I was trying this as well but gives same error.
// console.log("componentWillReceiveProps", nextState);
// if (this.state.timeSpan === "monthly") {
// const monthlyData = this.props.dispensingData.duration["monthly"];
// console.log({ monthlyData });
// this.setState({ spanData: monthlyData });
// }
// if (this.state.timeSpan === "yearly") {
// const yearlyData = this.props.dispensingData.duration["yearly"];
// this.setState({ spanData: yearlyData });
// } else if (this.state.timeSpan === "weekly") {
// const weeklyData = this.props.dispensingData.duration["weekly"];
// this.setState({ spanData: weeklyData });
// } else if (this.state.timeSpan === "quarterly") {
// const quarterlyData = this.props.dispensingData.duration["quarterly"];
// this.setState({ spanData: quarterlyData });
// } else if (this.state.timeSpan === "monthly") {
// const monthlyData = this.props.dispensingData.duration["monthly"];
// console.log({ monthlyData });
// this.setState({ spanData: monthlyData });
// } else if (this.state.timeSpan === "6 months") {
// const halfYearlyData = this.props.dispensingData.duration["half-yearly"];
// this.setState({ spanData: halfYearlyData });
// }
}
handleTabChange = (event, newValue) => {
this.setState({
setTabValue: newValue,
});
};
/**
* Year change
* @param {*} event
*/
handleYearChange = (event) => {
const v = event.target.value;
this.setState({
year: v,
});
this.props.getDuration(v);
};
handleSpanChange = (event) => {
const value = event.target.value;
const reValue = value === "6 months" ? "half-yearly" : value;
this.setState({
timeSpan: value,
});
this.props.getOverviewData(
value,
this.props.duration[reValue][0].period.to,
this.props.duration[reValue][0].period.from,
this.props.dataType,
this.props._reference
);
this.setState({
dataTo: this.props.duration[reValue][0].period.to,
dataFrom: this.props.duration[reValue][0].period.from,
incidencesSection: false,
overViewSelect: "",
});
};
handleSpanTabChange = (data, i) => {
this.setState({
selectTab: i,
dataTo: data.period.to,
dataFrom: data.period.from,
durationLabel: data.label,
overViewSelect: "",
incidencesSelection: false,
});
};
handleDataTypeChange = (event) => {
this.setState({
dataType: event.target.value,
});
const { time, dataTo, dataFrom } = this.state;
this.props.getOverviewData(
time,
dataTo,
dataFrom,
event.target.value,
this.props._reference
);
this.setState({
incidencesSection: false,
overViewSelect: "",
});
};
handleOverViewClick = (data) => {
this.props.clearAnalysis();
this.setState({
overViewSelect: data,
});
const value =
this.state.time === "6 months" ? "half_yearly" : this.state.time;
const { dataFrom, dataTo, dataType } = this.state;
this.props.getAnalysis(
data,
value,
dataFrom,
dataTo,
dataType,
1,
this.props._reference
);
this.setState({
incidencesSelection: true,
});
};
render() {
const {
tabValue,
spanData,
timeSpan,
year,
dataType,
overViewSelect,
incidencesSection,
} = this.state;
const { classes, dispensingData } = this.props;
const {
duration,
period,
type,
incidenceAnalysisDataArray,
_reference,
overviewDataLoading,
loading,
dispensingOverviewData,
analysisDataLoading,
incidenceAnalysisData,
} = dispensingData;
const { count } = dispensingOverviewData;
console.log("handleTimeSPan", this.state.spanData);
return (
<div className={classes.dispenseRoot}>
</div>
);
}
}
I am using redux saga in my project.
Well, You change the state and component rerender itself. Rerender calls componentWillUpdate
, it changes state and component rerender itself. Rerender calls componentWillUpdate
, it changes state and component rerender itself. Rerender calls componentWillUpdate
, it changes state and component rerender itself. Rerender calls componentWillUpdate
, it changes state and component rerender itself.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.