在每次按键时使用 React 语义下拉菜单进行后端搜索

Doing Backend Searches with a React Semantic Dropdown Rerenders on Every Keypress

好的,我已经从 react-semantic-ui 实现了一个可搜索的多选下拉列表。 (https://react.semantic-ui.com/modules/dropdown/)

它通常在前端运行,因此您可以在输入字段中输入搜索查询,并实时过滤结果。

我想实现后端搜索,这是使用带有 searchQuery 变量的 axios 调用完成的。问题是每次按下一个键都会触发 onSearchChange 以进行新的搜索,这会重新呈现下拉列表,从而关闭下拉列表并清除查询。

返回的数据是一个数组,与那个按键的搜索相匹配,但这不会在新的下拉选项中呈现,并且在重新打开保管箱时,搜索查询也已被清除。

我真的不知道如何在不更改状态的情况下进行后端搜索,这会导致重新呈现并清除所有内容。关于如何解决这个问题有什么建议吗?

const ParentComponent = () => {
const [options, setOptions] = useState()
const [searchString, setSearchString] = useState('')

 useEffect(() => {
    const fetchOptions = async (searchString) => {
    // getOptions is just an async axios.get, which returns an options array based on the search criteria
        const response = await getOptions(searchString)
        setOptions(response)
    }
    fetchOptions(searchString)
}, [searchString])

const handleSearchChange = (e, search) => {
    setSearchString(() => search.searchQuery)
}
return(
   <DropDown
      onSearchChange={handleSearchChange}
      searchQuery={searchString}
      options={options}
    />
)}

following 应该有效,我将搜索 属性 设置为一个函数:search={() => options} 并仅在它是最后一个用户输入时才解析 filterCountries。

在示例中,当搜索长度为一个字符时,解析需要 2 秒,但如果不是,则需要 500 毫秒。因此,如果我键入 a 然后 al 有 2 个承诺,承诺 al 会快速解决并设置选项,但稍后承诺 a 解决并会覆盖选项,如果我不会使用 last.

我还在代码中添加了 debounce 和 group,group 将缓存结果直到页面重新加载,您可以通过替换 createCache 逻辑来缓存任何一种方式。