1. クエリフック

useSearchResults

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

検索結果クエリフックを使って、検索結果ウィジェットのデータを要求・取得できます。ページ、キーフレーズ、選ばれたFacets、itemsPerPage、sortType。

Requestパラメータ

名称

種類

概要

page

整数

現在のページ。

keyphrase

ストリング

検索する文字列。

selectedFacets

文字列の配列

選択したfacetsのIDです。

itemsPerPage

整数

ページあたりの結果数。

sortType

ストリング

結果をソートするための価値です。

ジェネリック応答

{ widgetRef, query, 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 = , } = {}, } }

輸入

import { useSearchResults } from '@sitecore-search/react';

例

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

) => query, state: { sortType: defaultSortType, page: defaultPage, itemsPerPage: defaultItemsPerPage, keyphrase: defaultKeyphrase, }, }); const totalPages = Math.ceil(totalItems / itemsPerPage); const selectedSortIndex = sortChoices.findIndex((s
) => s.name === sortType); const selectedFacetsFromApi = useSearchResultsSelectedFacets(); if (isLoading) { return (
...
); } return (
...
); };

const SearchResultsStyledWidget = widget(SearchResultsComponent, WidgetDataType.SEARCH_RESULTS, 'content');

export default SearchResultsStyledWidget;

!注ページに追加する前に、UIコンポーネントをウィジェットコンポーネントに変換してください。

コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidgetまたはsetWidget関数に渡します。

!注注意事項これらのReactリソースは、あなたの実装に役立ちます:

この記事を改善するための提案がある場合は、 お知らせください!