0

私には意味をなさないinstantsearch.jsからエラーが発生しています。エラーは次のとおりです。

エラー: 縮小された例外が発生しました。完全なエラー メッセージと追加の役立つ警告を表示するには、縮小されていない開発環境を使用してください。

問題のコードでフィドルを作成しました：

https://jsfiddle.net/qkqzgsv9/

HTMLは次のとおりです。

<div type="text" id="search-box" class="form-control"></div>
<table class="table table-striped">
            <thead>
                <tr>
                    <th>Number</th>
                    <th>Name</th>
                    <th>Starts</th>
                    <th>Duration</th>
                    <th>Room</th>
                    <th><span class="glyphicon glyphicon-info-sign"></span></th>
                </tr>
            </thead>
            <tbody id="hits-container">
            </tbody>
</table>
<div id="pagination-container"></div>

そして、ここにJavascriptがあります：

  var search = instantsearch({
    appId: '5V0BUFDX8J',
    apiKey: 'a25692c12853aea7a77c5a7125498512',
    indexName: 'C86FE050-6C48-11E5-84AA-BA5F164D0BA4_events',
    urlSync: { useHash: true }
  });

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    autofocus: true,
    placeholder: 'Search for events by keyword, description, or event number.'
  })
);

 search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits-container',
      templates: {
        empty: 'No events found',
        item: '<tr><td><a href="{{view_uri}}">{{event_number}}</a></td><td><a href="{{view_uri}}" target="_new">{{name}}</a></td><td>{{startdaypart_name}}</td><td>{{duration_name}}</td><td>{{room_name}}</td><td><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="{{description}}"></span></td></tr>'
      },
    })
  );

  search.addWidget(
    instantsearch.widgets.pagination({
      container: '#pagination-container'
    })
  );

  search.start();

SafariとChromeの両方で発生します。そして、私は Instantsearch.js の縮小版も使用していません。何が原因ですか？

4

1 に答える 1

5

これは厄介なバグであり、このウィジェットが内部で React を使用しているために発生します。

ウィジェットは、テンプレートを含む div をレンダリングしようとします。ただし、テンプレートには div でレンダリングできない td が含まれているため、これは正しくありません。ブラウザーはそれを修正しようとします。これは、DOM が期待したものではないため、React が不変違反エラーをスローすることにつながります。最後に、ビルドで React が縮小されているため、この特定のエラーが表示されます。

修正は、td を使用しないか、この問題https://github.com/algolia/instantsearch.js/issues/707が修正されるのを待つことです。

于 2015-12-29T19:44:07.473 に答える