圆形物体，非法isArrayLike（）调用和无限$消化循环创建＆LT; DIV＆GT;与ngReact [英] circular objects, illegal isArrayLike() invocation and Infinite $digest loop creating a <div> with ngReact
问题描述
[增订九月，24]
[UPDATED Sept, 24]
我想使用ngReact代替ngRepeat提高性能，当我修改对象的我看了$数组。
I am trying to use ngReact instead of ngRepeat to improve performance when I modify my $watched array of objects.
有关包含在控制器的每个对象（地图标记），我想创建一个＆LT;按钮＆GT; ，用 marker.title 为文本。为了这个目的，我装箱即$手表标记的阵列的阵营组件。这种包含的列表，每个标记。我认为该组件将导致的改变仅当我修改标志物的列表，然后按钮的列表。然而，这不是这种情况。
For each object (a map marker) contained in the controller, I want to create a <button>, with the marker.title as text. For this purpose, I crated a React component that $watches an array of markers. Such a contains a list of , one for each marker. I supposed that the component will result changed only if I modify the list of markers, and then the list of buttons. However this is not the case.
[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
这似乎列表中的＆LT;按钮方式＆gt;由作出反应创建分量的结果总是不同的，即使由同一对象进行的。
It seems that the list of the <button> created by the React component results always different, even if made by the same objects.
现在的怪异的一部分..其实，我添加标记使用JSON对象地图。当我添加一个JSON对象，地图创建一个标记对象，而不是jsonable导致它有一个圆形结构。我这个标记对象添加到我的$看着阵，以创建相对＆LT;按钮＆GT; ...也许这是的原因非法isArrayLike（）错误？
Now the weird part.. Actually,I add markers to the map using Json objects. When I add a Json object, the map create a Marker object, not jsonable cause it has a circular structure. I add this Marker object to my $watched array, to create the relative <button>... Maybe this is the cause of the illegal isArrayLike() error?
这是我的阵营组成部分（在我帖子的末尾，有的jsfiddle链接）
Here it is my React component (at the end of my post, there is the JSfiddle link)
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 。简要说明：
- 有2阵列在$ rootScope。 temp_list用来暂时推所有由一个标记之一。 m_list是$由反应组件观看。
- 有其控制器MapBox指令。每个标记添加到地图，它会在temp_list被推
- 一旦所有的标记物都被加载和temp_list完成后，该克隆到m_list，所以反应组分可以被更新。
感谢您
推荐答案
我找到了解决办法！该问题在某种程度上被连接到使用在地图上的。在观看阵列，我不加入JSON的标记，但我加入由MapBox创建的对象标记。
I found a solution! The problem somehow is connected to the use of the map. In the watched array, I am not adding the Json markers, but I am adding the object marker created by 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创建的对象的盯防，具有环状结构。出于这个原因，作出反应无法知道自上次检查旧的$看着阵发生了变化，因为它不能执行 isArrayLike（）当周期结构present。因此，它上升了一个错误（在任何浏览器不同），并认为该阵列总是发生变化，产生了$消化无限循环。
The object marker created by MapBox, has a cyclic structure. For this reason, React cannot know if the old $watched array has changed since the last check, because it cannot perform isArrayLike() when cycle structure is present. So it rises an error (different in any browser) and considers the array always changed, generating the $digest infinite iteration.
我的解决方案是使用一个阵列和一个地图。该阵列$只的信息看，我需要的按钮，显示
My solution is using one array and one map. The array is $watched with just the information I need to display in the button
{'title': 'marker title', 'id':00001}
地图包含的真正标志物
the map contains the real marker objects
{'00001' : {markerObj}}
这是一个工作的jsfiddle ！点击一个按钮和标记物将被选择。
and this is a working JSFiddle ! Click on a button and the marker object will be selected.
此问题的解决方案也对官方NG-反应项目
This question and solution is also poster on the forum of the official ng-react project
这篇关于圆形物体，非法isArrayLike（）调用和无限$消化循环创建＆LT; DIV＆GT;与ngReact的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
