有一个包含许多图像的页面,实际上是一个图像库。可以更新库页面以包括新的或删除现有的图像条目。使用以下函数创建图像的条目,第一次调用函数,成功完成,后续调用,处理更新的模型,失败,异常
'未捕捉错误:不变违规行为'。
造成这种情况的原因是什么?
render: function () {
var imageEntries = this.props.map(function (entry) {
var divStyle = {
backgroundImage: 'url(' + entry.preview + ')',
};
return React.DOM.div({key: entry.key, className: 'image-stream-entry'},
React.DOM.div({className: 'image', style: divStyle}),
imageMetadata(entry)
);
});
return (
React.DOM.div(null, imageEntries)
);
}
答案 0 :(得分:8)
这意味着实际的DOM处于与虚拟DOM不同的状态,并且React无法协调这两者以进行呈现。通常这是由ELSE更改React期望的HTML,JavaScript错误或不同的库进行更改引起的。
正如pyrho指出的那样,你对this.props.map
的呼吁似乎是一个问题。 this.props
应该返回一个对象,Object
没有map
方法。可能会抛出Invariate错误,因为由于此语法错误,组件无法装入DOM。
我编写了一个带有修改版代码的codepen(以及一些额外的支持代码,以使演示工作)。您可以在此处查看:http://codepen.io/jhubert/pen/PwqZyr
代码的核心如下:
var renderEntry = function (entry) {
var divStyle = {
backgroundImage: 'url(' + entry.preview + ')'
};
return D.div({ key: entry.key, className: 'image-stream-entry'},
D.div({className: 'image', style: divStyle}),
imageMetadata(entry)
);
};
Gallery = React.createClass({
displayName: 'Gallery',
propTypes: {
entries: React.PropTypes.array.isRequired
},
getDefaultProps: function () {
return { entries: [] };
},
render: function () {
return D.div({ className: 'gallery' }, this.props.entries.map(renderEntry));
}
});