3

当我为我的图表 (react-chartjs-2) 获取数据时收到此错误。我实现了 try/catch 块，但不知道如何消除此错误。在 Edge 浏览器上，我得到 CRIPT28: SCRIPT28: Out of stack space

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)
4

3 回答 3

2

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

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

你的状态是什么形状？看起来您的状态中可能存在循环依赖关系，这导致我们遍历它以跟踪突变的方式出现问题。

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

invariant({ ignore: ['path.to.ignore'] })
于 2020-02-14T06:14:15.653 回答
1

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

于 2018-09-20T17:31:10.840 回答
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()是唯一的变化。

于 2020-08-13T01:23:54.910 回答