[英]React.js Error: Invariant Violation: Minified React error #37
[英]React.js Uncaught Error: Invariant Violation updating list
有一个页面包含许多图像,基本上是一个图像库。 可以更新库页面以包括新的或删除现有的图像条目。 使用以下函数创建图像的条目,第一次调用函数,成功完成,后续调用,处理更新的模型,失败,异常
'未捕获错误: 不变违规 '。
是什么导致了这个?
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)
);
}
这意味着实际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));
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.