Algolia SearchBox输入无响应问题求助（Next.js环境）

在Next.js项目中集成Algolia的SearchBox后，输入内容完全无法更新——输入框中输入文字时，值毫无变化。多次重建Next.js模板并重新实现，问题仍存在。

现有代码 #

index.tsx #

import type { NextPage } from 'next'

import algoliasearch from 'algoliasearch/lite';
import {
  InstantSearch,
  SearchBox,
  Pagination,
  Configure,
} from 'react-instantsearch-dom';

const Home: NextPage = () => {
  const searchClient = algoliasearch(
    'B1G2GM9NG0',
    'aadef574be1f9252bb48d4ea09b5cfe5'
  );

  return (
    <div className="ais-InstantSearch">
      <h1>React InstantSearch e-commerce demos</h1>
      <InstantSearch searchClient={searchClient} indexName="demo_ecommerce">
        <Configure hitsPerPage={8}/>
        <div className="search-panel">
          <div className="search-panel__filters">

          </div>

          <div className="search-panel__results">
            <SearchBox
              className="searchbox"
              translations={{
                placeholder: ''
              }}
            />

            <div className="pagination">
              <Pagination/>
            </div>
          </div>
        </div>
      </InstantSearch>
    </div>
  )
}


export default Home

package.json配置 #

{
  "name": "teste2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "algoliasearch": "^4.14.2",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-instantsearch-dom": "^6.33.0"
  },
  "devDependencies": {
    "@types/node": "18.7.20",
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "@types/react-instantsearch-dom": "^6.12.3",
    "eslint": "8.24.0",
    "eslint-config-next": "12.3.1",
    "typescript": "4.8.3"
  }
}

问题原因及解决办法 #

核心问题是React 18与react-instantsearch-dom v6版本的兼容性冲突。react-instantsearch-dom是基于类组件的旧版库，未适配React 18的并发渲染机制，导致输入框状态无法正常同步更新。

解决步骤：

1. 卸载旧版依赖：

npm uninstall react-instantsearch-dom @types/react-instantsearch-dom

2. 安装适配React 18的hooks版本：

npm install react-instantsearch-hooks-web @types/react-instantsearch-hooks-web

3. 修改组件导入路径（仅需替换导入语句，其余代码无需改动）：

// 将原导入替换为
import {
  InstantSearch,
  SearchBox,
  Pagination,
  Configure,
} from 'react-instantsearch-hooks-web';

4. 重启Next.js开发服务器，输入框即可正常响应输入操作。

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