12

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

'未捕获的错误：不变违规'。

这是什么原因造成的？ 

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

1 回答 1

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));
  }  
});
于 2014-11-24T18:23:56.423 回答