Question

[9月24日更新]

我正在尝试使用ngReact而不是ngRepeat来改进我修改$ watchched对象数组时的性能。

对于控制器中包含的每个对象（地图标记），我想创建一个<button>，其中marker.title为文本。为此，我创建了一个React组件，$ watch观察一系列标记。这样的a包含每个标记一个的列表。我认为只有当我修改标记列表然后按钮列表时，组件才会导致更改。但事实并非如此。

[TypeError]: Illegal invocation
  at isArrayLike (angular.js:274)
  at forEach (angular.js:328)
  at copy (angular.js:886)

[Error]: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.0-rc.0/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (angular.js:68)
    at Scope.parent.$get.Scope.$digest (angular.js:15340)
    at Scope.parent.$get.Scope.$apply (angular.js:15570)
    at (index):95

似乎React组件创建的<button>列表总是不同，即使是由相同的对象创建的。

现在奇怪的部分..实际上，我使用Json对象向地图添加标记。当我添加一个Json对象时，地图会创建一个Marker对象，而不是jsonable，因为它具有圆形结构。我将此Marker对象添加到我的$ watched数组中，以创建相对<button> ...也许这是导致illegal isArrayLike()错误的原因？

这是我的React组件（在我的帖子的末尾，有JSfiddle链接）

HTML

    <!-- m_list is an attribute of $rootScope -->
    <poi-list list="m_list" />

JS

.value( "PoiList", React.createClass( {

  propTypes : {

    list: React.PropTypes.object.isRequired
  },

  render: function() 
   {
    var markers = this.props.list.map( function( marker, i ) 
        {//for each marker, create a button
         return React.DOM.button(  {
                                    className:'btn btn-default'                               
                                   }, marker.title
                                 ) ; 
        } );
    return React.DOM.div({}, markers);
    }


}))

.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} );

this is a JSFiddle我的问题。简要说明：

$ rootScope中有2个数组。 temp_list用于临时逐个推送所有标记。 m_list由反应组件观察。
有一个带有控制器的MapBox指令。对于添加到地图中的每个标记，它将被推送到temp_list。
一旦加载了所有标记并且temp_list完成，就会将其克隆到m_list，以便更新react组件。

谢谢

Answer 1

我找到了解决方案！问题以某种方式与地图的使用有关。在观察的数组中，我没有添加Json标记，但我添加了MapBox创建的对象标记。

map.featureLayer.setGeoJSON(json_markers_list);  // I pass an array of Json markers
map.featureLayer.on('layeradd', function(e) 
                {
                     var marker = e.layer;        // marker is anymore a json obj
                     ctrl.pushMarker(marker);  // marker now has a cyclic structure
                    });

MapBox创建的对象标记具有循环结构。出于这个原因，React无法知道自上次检查以来旧的$ watched数组是否已更改，因为当存在循环结构时它无法执行isArrayLike()。因此它会出现错误（在任何浏览器中都不同）并认为数组总是在变化，从而生成$ digest无限迭代。

我的解决方案是使用一个数组和一个地图。仅使用按钮

中显示的信息来观看数组

{'title': 'marker title', 'id':00001}

地图包含真实的标记对象

{'00001' : {markerObj}}

这是一个有效的JSFiddle！单击按钮，将选择标记对象。

此问题和解决方案也是official ng-react project

论坛上的海报

循环对象，非法isArrayLike（）调用和Infinite $ digest循环使用ngReact创建<div>

1 个答案: