Javascript React.js未捕获错误：不变冲突更新列表

有一个包含许多图像的页面，本质上是一个图像库。库页面可能会更新，以包含新的或删除现有的图像条目。使用以下函数创建映像的条目，第一次调用该函数时，它成功完成，后续调用处理更新的模型时失败，但出现异常

'未捕获错误：不变冲突'

这是什么原因造成的

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无法协调两者以进行渲染。通常，这是由其他更改所期望的HTML的内容引起的，可能是JavaScript错误，也可能是其他库进行了更改

正如皮罗指出的，调用

this.props.map

似乎是个问题

this.props

应该返回一个对象，并且

object

没有

map

方法。由于此语法错误导致组件未能装入DOM，因此可能引发不变性错误

我编写了一个代码笔，其中包含您代码的修改版本（以及一些额外的支持代码，以使演示工作正常）。您可以在这里查看：

守则的核心内容如下：

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

---

如果您使用React的未统一版本，您将收到有用的错误消息。

imageMetadata

做什么？如果您正在进行异步更新，您可能需要在调用setState之前检查isMounted，因为在请求完成时可能不再装载组件实例。请参见这一行：

var-imageEntries=this.props.map（function（entry）{

我认为您缺少了实际的prop。它应该是这样的：

var-imageEntries=this.props.entries.map（function（entry）{

map

作为javascript的映射函数。由于语法错误，我有一个类似的错误。