React.js未捕获错误:不变违规更新列表

时间:2014-01-10 22:32:29

标签: javascript reactjs

有一个包含许多图像的页面,实际上是一个图像库。可以更新库页面以包括新的或删除现有的图像条目。使用以下函数创建图像的条目,第一次调用函数,成功完成,后续调用,处理更新的模型,失败,异常

  

'未捕捉错误:不变违规行为'。

造成这种情况的原因是什么?

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

1 个答案:

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