使用react-search-autocomplete遇useState空值读取错误的解决方法

问题 #

在React 18.2中使用react-search-autocomplete组件时，持续报错：Cannot read properties of null (reading 'useState')。

主页面代码：

import React from "react";
import ReactSearch from '../Components/ReactSearchComponent'

export default function Welcome() {
   
    return (
        <div className="container body-content">
            <ReactSearch />
        </div>
    );
}

自定义组件ReactSearchComponent代码（与npm官网示例一致）：

import React from 'react'
import { ReactSearchAutocomplete } from 'react-search-autocomplete'

function App() {
    // note: the id field is mandatory
    const items = [
        {
            id: 0,
            name: 'Cobol'
        },
        {
            id: 1,
            name: 'JavaScript'
        },
        {
            id: 2,
            name: 'Basic'
        },
        {
            id: 3,
            name: 'PHP'
        },
        {
            id: 4,
            name: 'Java'
        }
    ]

    const handleOnSearch = (string, results) => {
        // onSearch will have as the first callback parameter
        // the string searched and for the second the results.
        console.log(string, results)
    }

    const handleOnHover = (result) => {
        // the item hovered
        console.log(result)
    }

    const handleOnSelect = (item) => {
        // the item selected
        console.log(item)
    }

    const handleOnFocus = () => {
        console.log('Focused')
    }

    const formatResult = (item) => {
        return (
            <>
                <span style={{ display: 'block', textAlign: 'left' }}>id: {item.id}</span>
                <span style={{ display: 'block', textAlign: 'left' }}>name: {item.name}</span>
            </>
        )
    }

    return (
        <div className="App">
            <header className="App-header">
                <div style={{ width: 400 }}>
                    <ReactSearchAutocomplete
                        items={items}
                        onSearch={handleOnSearch}
                        onHover={handleOnHover}
                        onSelect={handleOnSelect}
                        onFocus={handleOnFocus}
                        autoFocus
                        formatResult={formatResult}
                    />
                </div>
            </header>
        </div>
    )
}

export default App

解决方法 #

这个错误通常由组件Hook调用环境异常或依赖版本不兼容导致，可按以下步骤排查修复：

• 统一组件命名避免混淆
  自定义组件内部定义的是App函数，但主页面导入的是ReactSearch，虽然默认导出不影响功能，但建议将组件内的function App()改为function ReactSearch()，保持命名一致，减少潜在的逻辑混淆。

• 更新组件到兼容React 18的版本
  旧版react-search-autocomplete可能不支持React 18的Hook机制，执行命令更新到最新版本：

  npm update react-search-autocomplete
  # 或使用yarn
  yarn upgrade react-search-autocomplete
  

• 确保React导入完整
  尝试将React导入改为完整导入，避免Hook加载异常：

  import * as React from 'react'
  

• 验证根组件渲染方式
  确认Welcome组件是通过React 18的createRoot方式渲染的，确保组件处于正确的React环境中：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import Welcome from './Welcome';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Welcome />);
  

• 清理缓存并重装依赖
  缓存异常可能导致依赖加载错误，执行以下命令重置依赖：

  rm -rf node_modules package-lock.json
  npm install
  npm start
  

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