Next.js中react-autosuggest绑定useRef读取value报undefined如何解决

算力阿峰

2026-10-6

问题原因

这个报错和Next.js框架无关，是react-autosuggest的组件API设计导致的：你直接给<Autosuggest />组件绑定ref，拿到的是Autosuggest的组件实例，不是内部的原生input元素，因此autosuggestInput.current上不存在value属性，才会抛出未定义的错误。

解决方法

react-autosuggest提供了专门的inputRef属性，用来给内部的原生input绑定ref，同时所有作用在input上的属性（比如className、type）都要放到inputProps配置项中传递，不要直接写在Autosuggest组件标签上。

修正后的代码示例：

import { useState, useEffect, useRef } from 'react';
import Autosuggest from 'react-autosuggest';

export const SearchBar = () => {
  const autosuggestInput = useRef(null);

  // 注意：不要在组件渲染顶层直接读取value，要放到事件回调中执行，比如提交按钮点击、建议选中回调
  const handleSubmit = () => {
    const city = autosuggestInput.current?.value;
    // 后续提交逻辑
  }

  const handleSuggestionSelected = (event, { suggestion }) => {
    // 选中建议后触发提交的逻辑
    handleSubmit();
  }

  return(
    <Autosuggest
      {/* 其他react-autosuggest必填配置（suggestions、onSuggestionsFetchRequested等，你原有逻辑保留即可） */}
      onSuggestionSelected={handleSuggestionSelected}
      inputProps={{
        type: "text",
        ref: autosuggestInput,
        className: "py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
      }}
    />
  )
}

注意事项