React自动完成搜索框建议为空但已完成数组映射的问题排查

问题根因 #

你遇到的建议列表为空是三个常见React开发问题共同导致的：

1. React的setState是异步更新的，你在querySuggestion里刚调用setSearch就直接读取search变量做判断、过滤，拿到的永远是更新前的旧值，第一个字符输入时search还为空，根本进不了过滤逻辑。
2. 过滤时只把目标字段转成了小写，没有把用户输入的搜索词转成小写，大小写不匹配导致过滤结果为空。
3. defaultData初始值为undefined，首次渲染调用filter方法会直接报错，阻塞后续逻辑执行。

修复步骤 #

1. 修正Main组件defaultData初始值 #

给defaultData设置空数组初始值，避免加载前调用数组方法报错：

// Main组件
// 把原来的const [defaultData, setDefaultData] = useState()替换为
const [defaultData, setDefaultData] = useState([])

2. 重写SearchBar的querySuggestion逻辑 #

直接用输入框最新值做判断和过滤，同时统一搜索词和目标字段的大小写：

// SearchBar组件querySuggestion方法
const querySuggestion = (e) => {
  const inputVal = e.target.value
  setSearch(inputVal)
  // 直接用最新的输入值判断，不要用还没更新的search变量
  if (inputVal.trim().length > 0 && defaultData.length) {
    const searchLower = inputVal.toLowerCase()
    const filteredSugg = defaultData.filter((data) => {
      return (
        data.eth.toLowerCase().includes(searchLower) ||
        data.gen.toLowerCase().includes(searchLower) ||
        data.iden.toLowerCase().includes(searchLower)
      )
    })
    setSugg(filteredSugg)
  } else {
    setSugg([])
  }
}

3. （可选）新增点击建议项自动填充搜索功能 #

如果需要点击建议项直接触发搜索，补充以下修改：
首先在SearchBar组件给Suggestion传递必要方法：

// SearchBar组件渲染Suggestion的部分
<Suggestion 
  search={search} 
  sugg={sugg} 
  setSearch={setSearch} 
  setSugg={setSugg} 
  setResults={setResults}
  defaultData={defaultData}
/>

然后修改Suggestion组件，新增点击事件：

// Suggestion组件
const Suggestion = ({sugg, setSearch, setSugg, setResults, defaultData}) => {
  // 点击建议项触发的逻辑
  const handleSelect = (selectVal) => {
    setSearch(selectVal)
    // 直接触发结果过滤，无需用户按回车
    const searchLower = selectVal.toLowerCase()
    const filterResult = defaultData.filter(item => 
      item.eth.toLowerCase().includes(searchLower) ||
      item.gen.toLowerCase().includes(searchLower) ||
      item.iden.toLowerCase().includes(searchLower)
    )
    setResults(filterResult)
    // 选中后关闭建议列表
    setSugg([])
  }

  const suggestionArray = sugg.map(arr => (
    <div key={arr.id}>
      <li 
        className="col-12" 
        onClick={() => handleSelect(arr.eth)}
        style={{cursor: 'pointer'}}
      >
        {arr.eth}
      </li>
    </div>
  ))

  // 原有useEffect和return逻辑保留即可
}

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