当我获取图表数据时(react-chartjs-2),我收到此错误。我实现了try / catch块,并且不知道如何消除此错误。在Edge浏览器上,我得到CRIPT28:SCRIPT28:堆栈空间不足
Uncaught (in promise) RangeError: Maximum call stack size exceeded
at trackProperties (trackForMutations.js:16)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
at trackProperties (trackForMutations.js:32)
Promise.catch (async)
(anonymous) @ ordersActions.js:44
(anonymous) @ index.js:9
(anonymous) @ index.js:43
(anonymous) @ index.js:55
(anonymous) @ bindActionCreators.js:5
loadDataForChart @ OrdersChart.js:96
boundFunc @ ReactErrorUtils.js:63
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
executeDispatch @ EventPluginUtils.js:83
executeDispatchesInOrder @ EventPluginUtils.js:106
executeDispatchesAndRelease @ EventPluginHub.js:41
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:52
forEachAccumulated @ forEachAccumulated.js:22
processEventQueue @ EventPluginHub.js:252
runEventQueueInBatch @ ReactEventEmitterMixin.js:15
handleTopLevel @ ReactEventEmitterMixin.js:25
handleTopLevelImpl @ ReactEventListener.js:70
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
dispatchEvent @ ReactEventListener.js:145
这是我在组件中调用的操作。
export function getDataForChart(dtStart, dtEnd) {
return function (dispatch) {
let actionUrl = new Localization().getURL(baseUrl, 'GetDataForChart');
dispatch({ type: types.CHARTSUMMARY });
return axios.post(actionUrl, { dateStart: dtStart, dateEnd: dtEnd }, {
headers: {
'RequestVerificationToken': antiForgeryToken.value,
'X-Requested-With': 'XMLHttpRequest'
}
}).then((response) => {
dispatch({ type: types.CHARTSUMMARY_LOADED, payload: response.data })
}).catch((error) => {
dispatch({ type: types.CHARTSUMMARY_REJECTED, payload: error })
})
}
}
这是我的组件,已连接到redux存储。它;在我看来,一切都很好。
export class OrdersChart extends Component {
constructor(props) {
super(props)
this.state = {
eStart: moment(),
eEnd: moment(),
chartData: {},
chartLoaded: false,
chartStart: false
}
this.loadDataForChart = this.loadDataForChart.bind(this);
}
componentWillReceiveProps(nextProps) {
const { chartData, chartLoaded, chartStart } = nextProps;
if(this.state.chartData != chartData) {
this.setState({ chartData, chartLoaded, chartStart })
}
}
loadDataForChart() {
this.props.actions.getDataForChart(this.state.eStart, this.state.eEnd);
}
render() {
return (
<div>
/* Date pickers ...*/
<BtnReload onClick={this.loadDataForChart}></BtnReload>
<Line data={this.state.chartData} options={{ tooltips: { mode: 'x' } }} />
</div>
)
}
}
function mapStateToProps(state) {
return {
chartData: state.chart.ChartData,
chartLoaded: state.chart.chartLoaded,
chartStart: state.chart.fetching
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(Object.assign({}, ordersActions), dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(OrdersChart)
答案 0 :(得分:1)
您粘贴到此处的代码不称职,但是根据您的错误,您肯定会通过组件引起循环,因此请检查重复调用方法的位置。 在您的代码中,我怀疑您正在更改状态,并将其用于渲染方法中 请注意,每当您更改状态时,组件就会呈现
答案 1 :(得分:1)
有些迟了,但是可能是由于您所在州的循环引用所致。 检查此问题:https://github.com/leoasis/redux-immutable-state-invariant/issues/15
根据软件包的作者(在以上链接的对话中):
您的状态如何?看来您的状态可能存在循环依赖关系,这导致我们遍历跟踪变异的方式出现问题。
为了解决此错误,您可以使用对象路径语法,如下所示,删除状态中的循环引用或配置invariant
中间件以忽略状态的该分支:
invariant({ ignore: ['path.to.ignore'] })
答案 2 :(得分:0)
这意味着较少作为答案,而更多地是针对此错误的一般帮助。
我通过错误处理Firebase响应收到此错误。我尝试将其合并而不进行转换。我正在使用redux-actions
来处理我的状态更改。所以我原来有:
[t.FIREBASE_SUCCESS]: (state, { payload }) => change(state, { $merge: payload }),
但是我需要的是提取的数据对象:
[t.FIREBASE_SUCCESS]: (state, { payload }) => change(state, { $merge: payload.data() }),
payload.data()
是唯一的更改。