React Instantsearch：页面加载时设置SearchBox的搜索字符串

要实现页面加载时读取URL中的searchTerm参数并设置到SearchBox，你需要和React InstantSearch的内置状态管理联动，而非单独维护自定义state。以下是两种可行方案：

方案一：初始化时通过initialUiState设置初始查询 #

直接在InstantSearch组件中配置initialUiState，从URL参数读取初始查询值，页面加载时会自动同步到SearchBox并触发搜索：

import React from 'react'
import { Link } from 'gatsby'
import algoliasearch from 'algoliasearch/lite';
import {
    InstantSearch,
    InfiniteHits,
    SearchBox,
    Configure,
} from 'react-instantsearch-hooks-web';

export default function Search({ location }) {
    const params = new URLSearchParams(location.search);
    const initialSearchTerm = params.get("searchTerm") || "";

    const searchClient = algoliasearch(
        '...',
        '...'
    );

    return (
        <>
            <Layout>
                <div id="Contact">
                    <div className="contactWrapper">
                        <section className="section">
                            <div className="searchWrapper">
                                <InstantSearch
                                    indexName="All Pages"
                                    searchClient={searchClient}
                                    initialUiState={{
                                        'All Pages': {
                                            query: initialSearchTerm
                                        }
                                    }}
                                >
                                    <div className="searchFieldWrapper">
                                        <Configure hitsPerPage={20} />
                                        <SearchBox 
                                            placeholder="Vad söker du?" 
                                        />
                                    </div>
                                    <div className="searchResultWrapper">
                                        <InfiniteHits hitComponent={Hit} />
                                    </div>
                                </InstantSearch>
                            </div>
                        </section>
                    </div>
                </div>
            </Layout>
        </>
    )
}

function Hit(props) {
    return (
        <div className="box">
            <Link to={props.hit.url}>
                <div className="image">
                    <img src={props.hit.image} alt={props.hit.name} />
                </div>
                <div className="title">
                    {props.hit.title.split(" | ")[0].split(" - ")[0].split(" — ")[0]}
                </div>
            </Link>
        </div>
    );
}

方案二：使用useInstantSearch hook动态更新查询 #

如果需要监听URL参数的动态变化（比如路由切换后参数更新），可以用useInstantSearch获取setQuery方法，在useEffect中同步URL参数：

import React from 'react'
import { Link } from 'gatsby'
import algoliasearch from 'algoliasearch/lite';
import {
    InstantSearch,
    InfiniteHits,
    SearchBox,
    Configure,
    useInstantSearch,
} from 'react-instantsearch-hooks-web';

export default function Search({ location }) {
    const searchClient = algoliasearch(
        '...',
        '...'
    );

    return (
        <>
            <Layout>
                <div id="Contact">
                    <div className="contactWrapper">
                        <section className="section">
                            <div className="searchWrapper">
                                <InstantSearch
                                    indexName="All Pages"
                                    searchClient={searchClient}
                                >
                                    <SyncSearchTermWithUrl location={location} />
                                    <div className="searchFieldWrapper">
                                        <Configure hitsPerPage={20} />
                                        <SearchBox 
                                            placeholder="Vad söker du?" 
                                        />
                                    </div>
                                    <div className="searchResultWrapper">
                                        <InfiniteHits hitComponent={Hit} />
                                    </div>
                                </InstantSearch>
                            </div>
                        </section>
                    </div>
                </div>
            </Layout>
        </>
    )
}

// 单独组件处理URL参数同步
function SyncSearchTermWithUrl({ location }) {
    const { setQuery } = useInstantSearch();

    React.useEffect(() => {
        const params = new URLSearchParams(location.search);
        const searchTerm = params.get("searchTerm");
        if (searchTerm) {
            setQuery(searchTerm);
        }
    }, [location.search, setQuery]);

    return null;
}

function Hit(props) {
    return (
        <div className="box">
            <Link to={props.hit.url}>
                <div className="image">
                    <img src={props.hit.image} alt={props.hit.name} />
                </div>
                <div className="title">
                    {props.hit.title.split(" | ")[0].split(" - ")[0].split(" — ")[0]}
                </div>
            </Link>
        </div>
    );
}

关键说明 #

• 无需单独维护自定义search state，React InstantSearch内置状态管理，直接使用官方API操作查询状态即可。
• 方案一适合仅页面初始化时设置查询，方案二适合URL参数动态变化时同步更新。

内容的提问来源于stack exchange，提问作者JohiOakey