循环对象、非法的isArrayLike()调用和使用ngReact创建<div>的无限$digest循环

Question

9月24日更新

当我修改对象的ngReact数组时，我试图使用ngRepeat而不是ngRepeat来提高性能。

对于控制器中包含的每个对象(一个映射标记)，我希望创建一个以<button>为文本的marker.title。为此，我使用了一个React组件，该组件$watches是一个标记数组。这样的一个列表包含了每个标记的一个列表。我假设只有在修改标记列表，然后修改按钮列表时，组件才会发生更改。然而，情况并非如此。

[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' );
} );

我的问题的这是一个JSFiddle。简要说明：

• $rootScope中有两个数组。temp_list用于临时逐个推送所有标记。m_list是由react组件生成的$watched。
• 有一个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无限迭代。

我的解决方案是使用一个数组和一个地图。数组为$watched，只需在按钮中显示所需信息。

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

该地图包含真正的标记对象。

{'00001' : {markerObj}}

这是一个工作的JSFiddle！单击按钮，标记对象将被选中。

这个问题和解决方案也是官方ng反应项目论坛上的海报。