React.js未捕獲錯誤：不變違規更新列表

Question

有一個頁面包含許多圖像，基本上是一個圖像庫。 可以更新庫頁面以包括新的或刪除現有的圖像條目。 使用以下函數創建圖像的條目，第一次調用函數，成功完成，后續調用，處理更新的模型，失敗，異常

'未捕獲錯誤： 不變違規 '。

是什么導致了這個？

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

Answer 1

這意味着實際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));
  }  
});