2

私はalgoliaReactでInstantSearchを使用して、このようなアスリートデータをロードしています

<InstantSearch
  searchClient={searchClient}
  indexName={`${algoliaEnvironment}_athlete`}
>
  <div className="search-panel">
    <div className="search-panel__results">
      <SearchBox className="searchbox" />
      <InfiniteAthletes />
    </div>
  </div>
</InstantSearch>;

InfiniteAthletes では、無限スクロール機能を実装するために InfiniteHits ウィジェットを拡張しています。

render() {
  const {hits} = this.props;
  ...
  return <TableWrapper
           columns={columns}
           dataSource={hits}
           loading={loading}
           rowKey={record => {
             return record.objectID;
           }}
          />;
   ...
}
...
export default connectInfiniteHits(InfiniteAthletes);

props.hits では、アスリートに関するデータを取得します。私がする必要があるのは、アスリートのアバター (プロフィール写真) を「ヒット」小道具に非同期的にロードすることです。したがって、ヒットが更新されるたびに、アスリート ID のリストを取得します。非同期リクエストを送信してアバターを取得し、それらをヒット プロップに設定して、アバターを含む結果を再レンダリングする必要があります。これは、アルゴリアを (setState で) 使用していなかったときは簡単な作業でしたが、今ではこれを実装して新しいデータを props.hits に手動で設定する方法が見つかりません。ドキュメントを調べましたが、これを達成する方法に関する情報が見つかりません。

どんな助けでも大歓迎です、ありがとう!

4

0 に答える 0