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

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

这与其说是一个答案，不如说是对这个错误的一般帮助。

我错误地处理了一个Firebase响应。我试着在不改造的情况下合并它。我在这里使用< code>redux-actions来处理我的状态更改。所以我最初有:

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

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

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

有效负载.data（） 是唯一的更改。

Answer 2

你粘贴在这里的代码是无能的，但是根据你的错误，你肯定会通过你的组件引起循环，所以请检查你在哪里重复调用你的方法。在你的代码中，我怀疑你正在改变你的状态，它用在你的渲染方法中，请注意，每当你改变你的状态，你的组件就会渲染出来。

Answer 3

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

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

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

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

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