Question

当我获取图表数据时（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)

Answer 1

您粘贴到此处的代码不称职，但是根据您的错误，您肯定会通过组件引起循环，因此请检查重复调用方法的位置。在您的代码中，我怀疑您正在更改状态，并将其用于渲染方法中请注意，每当您更改状态时，组件就会呈现

Answer 2

有些迟了，但是可能是由于您所在州的循环引用所致。检查此问题：https://github.com/leoasis/redux-immutable-state-invariant/issues/15

根据软件包的作者（在以上链接的对话中）：

您的状态如何？看来您的状态可能存在循环依赖关系，这导致我们遍历跟踪变异的方式出现问题。

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

invariant({ ignore: ['path.to.ignore'] })

Answer 3

这意味着较少作为答案，而更多地是针对此错误的一般帮助。

我通过错误处理Firebase响应收到此错误。我尝试将其合并而不进行转换。我正在使用redux-actions来处理我的状态更改。所以我原来有：

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

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

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

payload.data()是唯一的更改。

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

3 个答案: