javascript React.js 未捕获错误：Invariant Violation 更新列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21055691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js Uncaught Error: Invariant Violation updating list
提问by user3183666
Have a page that contains a number of images, essentially an image gallery. The gallery page maybe updated to include new or remove existing image entries. An entry for an image is created using the following function, the first time the function is called, it completes successfully, subsequent calls, to handle an updated model, fail with the exception
有一个包含许多图像的页面，本质上是一个图像库。画廊页面可能会更新以包含新的或删除现有的图像条目。使用以下函数创建图像条目，第一次调用该函数时，它成功完成，后续调用处理更新的模型，失败并出现异常
'Uncaught Error: Invariant Violation'.
'未捕获的错误：不变违规'。
Whats causing this?
这是什么原因？
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)
);
}
回答by Jeremy Baker
It means that the actual DOM is in a different state than the virtual DOM and React is unable to reconcile the two in order to render. Typically this is caused by something ELSE changing the HTML that React is expecting, either a JavaScript error or a different library making changes.
这意味着实际 DOM 与虚拟 DOM 处于不同的状态，React 无法调和两者以进行渲染。通常，这是由其他一些改变 React 所期望的 HTML 引起的，要么是 JavaScript 错误，要么是不同的库进行了更改。
As pyrho pointed out, your call to this.props.mapseems to be an issue. this.propsshould return an object, and Objectdoesn't have a mapmethod. The Invariate error could be thrown because the component failed to mount into the DOM due to this syntax error.
正如 pyrho 指出的那样，您的电话this.props.map似乎是一个问题。this.props应该返回一个对象，并且Object没有map方法。由于此语法错误，组件无法挂载到 DOM 中，因此可能会引发 Invariate 错误。
I wrote up a codepen with a modified version of your code (and some additional supporting code to make the demo work). You can check it out here: http://codepen.io/jhubert/pen/PwqZyr
我用你的代码的修改版本（以及一些额外的支持代码来使演示工作）编写了一个代码笔。你可以在这里查看：http: //codepen.io/jhubert/pen/PwqZyr
The core of the code is as follows:
代码核心如下：
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));
}
});
