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 がレンダリングのために 2 つを調整できないことを意味します。通常、これは、JavaScript エラーまたは変更を行う別のライブラリのいずれかで、React が予期している HTML を変更する ELSE によって引き起こされます。

pyrho が指摘したように、あなたの呼び出しthis.props.mapは問題のようです。this.propsオブジェクトを返す必要Objectがあり、メソッドはありませんmap。この構文エラーのためにコンポーネントが DOM にマウントできなかったため、Invariate エラーがスローされる可能性がありました。

コードの修正版 (およびデモを機能させるための追加のサポート コード) を含む 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 に答える