开发者问题收集

react-redux RangeError:超出最大调用堆栈大小

2018-09-20
8021

当我获取图表 (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)
3个回答

有点晚了,但很可能是由于您的状态下的循环引用。 检查此问题: https://github.com/leoasis/redux-immutable-state-invariant/issues/15

根据包的作者(在上面链接的对话中):

What's the shape of your state? It looks like there may be circular dependencies in your state, which is causing problems with the way we traverse it to track mutations.

为了修复此错误,您可以删除状态中的循环引用,或者使用对象路径语法配置 invariant 中间件以忽略状态的该分支,如下所示:

invariant({ ignore: ['path.to.ignore'] })
poroia
2020-02-14

您在此处粘贴的代码是不合格的,但根据您的错误,您肯定是通过组件导致循环的,因此请检查重复调用方法的位置。 在您的代码中,我怀疑您正在更改状态,并且它在您的渲染方法中使用 请注意,每当您更改状态时,您的组件都会渲染

Alireza Yadegari
2018-09-20

这并非答案,而更像是针对此错误的一般帮助。

我因错误处理 Firebase 响应而收到此错误。我尝试合并它而不进行转换。我在这里使用 redux-actions 来处理我的状态更改。所以我最初有:

[t.FIREBASE_SUCCESS]: (state, { payload }) => change(state, { $merge: payload }),

但我需要的是提取的数据对象:

[t.FIREBASE_SUCCESS]: (state, { payload }) => change(state, { $merge: payload.data() }),

payload.data() 是唯一的变化。

jmargolisvt
2020-08-13