get rangeError超出最大调用堆栈大小

Question

我有一个带有复选框的下拉列表，其值是一个对象。 （见附件）

每次我选择一个对象时，都会有一个手表将这些新值（这是一个选定对象的数组）粘贴到另一个在指令（绑定）中显示它的对象 - tiles

$scope.$watch('skills', function(newVal, oldVal) {
        if (newVal) {
            console.log('changed!!! old value: ' + oldVal + '  new val  ' + newVal);
            if (newVal === undefined) {
                return;
            }
            $scope.tiles = _.cloneDeep(newVal);
        }
    }, true);



angular.module('dsadad')
    .component('tiles', {
        templateUrl: 'tile.tpl.html',
        bindings: {
            tiles: '<',
            onDelete: '&?'
        },
        controller: function ($state, _, $scope, $log, Utils, $translate, moment) {
            'use strict';

            var $ctrl = this;

        }
    });

我得到：rangeError超出最大调用堆栈大小

由于某种原因，所选对象数组的一个值是一个数组，也是一个对象的数组，你可以看到....

Answer 1

您的问题很可能是$scope.tiles = _.cloneDeep(newVal);

如果newVal具有对自身的引用，它将递归尝试克隆，直到您最终得到堆栈溢出。

e.g。你可能有一个像这样的循环对象结构：

const objectB = {
  id: 'B',
  otherData: null;
};
const objectA = {
  id: 'A',
  otherData: objectB;
};
objectB.otherData = objectA;
_.deepClone(objectB) // This will blow up due to the circular reference

否则，newVal嵌套得太深，导致问题。 E.g。

const objectA = {
  a: {
    b: {
      c: {
        // etc. etc.
      }
    },
  }
};

要解决此问题，您可以从数据结构中删除此循环引用，也可以通过执行{...newVal}

来执行适合您数据需求的浅表副本