javascript - 未捕获的错误:当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况
问题描述
我正在尝试在里面设置状态,componentWillUpdate
但这样说却给了我错误。我不知道为什么。
未捕获的错误:超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。
这就是我想要做的。
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>
);
}
}
我在我的项目中使用 redux saga。
解决方案
好吧,您更改状态和组件重新渲染本身。重新渲染调用componentWillUpdate
,它改变状态和组件重新渲染自己。重新渲染调用componentWillUpdate
,它改变状态和组件重新渲染自己。重新渲染调用componentWillUpdate
,它改变状态和组件重新渲染自己。重新渲染调用componentWillUpdate
,它改变状态和组件重新渲染自己。
推荐阅读
- php - 我该如何解决这个 [RuntimeException] Elasticsearch-PHP 需要 cURL 或自定义 HTTP 处理程序?
- java - JPA 一对多双向堆栈溢出问题
- python - Python @coroutine 装饰器
- javascript - 为什么在通过 Javascript 实现该样式之前,我必须在 CSS 中预先设置输入字段的样式?
- visual-studio-code - 如何使用 VS Code 直接在 Google Cloud Storage 上编辑文件?
- c# - 在 c# SemanticModel 中,有没有办法从引用类型中分辨出可为空的值类型?
- vue.js - 获取给定轴上的所有系列必须具有相同的数据类型,使用 Vue + Google Spreedsheet
- html - 使用 XSLT 将 HTML 标记插入纯文本
- maven - 如何在eclipse中使用maven junit5框架项目测试java项目中的方法
- html - 反应分页样式