useSearchResultsの
日本語翻訳に関する免責事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
検索結果クエリフックを使用して、検索結果ウィジェットのデータを要求および取得します。page、keyphrase、selectedFacets、itemsPerPage、およびsortType。
Requestパラメーター
|
名前 |
種類 |
形容 |
|---|---|---|
|
page |
整数 |
現在のページ。 |
|
keyphrase |
糸 |
検索する文字列。 |
|
selectedFacets |
文字列の配列 |
選択したfacetsのID。 |
|
itemsPerPage |
整数 |
ページあたりの結果の数。 |
|
sortType |
糸 |
結果を並べ替えるための値。 |
一般的な応答
RequestResponse
{
widgetRef,
actions: {
onResultsPerPageChange,
onPageNumberChange,
onItemClick,
onFilterClick,
onSortChange,
onFacetClick,
onClearFilters,
},
state: { sortType, page, itemsPerPage },
queryResult: {
isLoading,
isFetching,
data: {
total_item: totalItems = 0,
sort: { choices: sortChoices = [] } = {},
facet: facets = [],
content: articles = [],
} = {},
}
}輸入
RequestResponse
import { useSearchResults } from '@sitecore-search/react';例
RequestResponse
import type { SearchResultsInitialState, SearchResultsStoreState, SearchResultsWidgetQuery } from '@sitecore-search/react';
import { WidgetDataType, useSearchResults, useSearchResultsSelectedFacets, widget } from '@sitecore-search/react';
type ArticleModel = {
id: string;
type?: string;
title?: string;
name?: string;
subtitle?: string;
url?: string;
description?: string;
content_text?: string;
image_url?: string;
source_id?: string;
};
type ArticleSearchResultsProps = {
defaultSortType?: SearchResultsStoreState['sortType'];
defaultPage?: SearchResultsStoreState['page'];
defaultItemsPerPage?: SearchResultsStoreState['itemsPerPage'];
defaultKeyphrase?: SearchResultsStoreState['keyphrase'];
};
type InitialState = SearchResultsInitialState<'itemsPerPage' | 'keyphrase' | 'page' | 'sortType'>;
export const SearchResultsComponent = ({
defaultSortType = 'featured_desc',
defaultPage = 1,
defaultKeyphrase = '',
defaultItemsPerPage = 24,
}: ArticleSearchResultsProps) => {
const {
widgetRef,
actions: {
onResultsPerPageChange,
onPageNumberChange,
onItemClick,
onFilterClick,
onSortChange,
onFacetClick,
onClearFilters,
},
state: { sortType, page, itemsPerPage },
queryResult: {
isLoading,
isFetching,
data: {
total_item: totalItems = 0,
sort: { choices: sortChoices = [] } = {},
facet: facets = [],
content: articles = [],
} = {},
},
} = useSearchResults<ArticleModel, InitialState>({
query: (query:SearchResultsWidgetQuery) => query,
state: {
sortType: defaultSortType,
page: defaultPage,
itemsPerPage: defaultItemsPerPage,
keyphrase: defaultKeyphrase,
},
});
const totalPages = Math.ceil(totalItems / itemsPerPage);
const selectedSortIndex = sortChoices.findIndex((s:any) => s.name === sortType);
const selectedFacetsFromApi = useSearchResultsSelectedFacets();
if (isLoading) {
return ( <div> ... </div> );
}
return ( <div ref={widgetRef}> ... </div> );
};
const SearchResultsStyledWidget = widget(SearchResultsComponent, WidgetDataType.SEARCH_RESULTS, 'content');
export default SearchResultsStyledWidget;メモ
UIコンポーネントをウィジェット コンポーネントに変換してから、ページに追加します。
コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidget関数またはsetWidget関数に渡します。