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

Ответы

Ответ 1

Это означает, что фактическая DOM находится в другом состоянии, чем виртуальная DOM, и React не может согласовать два для рендеринга. Обычно это вызвано тем, что ELSE меняет HTML-код, который ожидают React, либо ошибка JavaScript, либо другая библиотека, вносящая изменения.

Как отметил Пирхо, ваш вызов this.props.map кажется проблемой. this.props должен возвращать объект, а Object не имеет метода map. Ошибка Invariate может быть выбрана из-за того, что компонент не смог подключиться к DOM из-за этой синтаксической ошибки.

Я написал код с измененной версией вашего кода (и некоторый дополнительный код поддержки, чтобы сделать демонстрационную работу). Вы можете проверить это здесь: 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));
  }  
});