私はalgolia
Reactで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 に手動で設定する方法が見つかりません。ドキュメントを調べましたが、これを達成する方法に関する情報が見つかりません。
どんな助けでも大歓迎です、ありがとう!