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

Question

好的，我已经从 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}
    />
)}

Answer 1

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

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

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

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

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

reactjs

react-hooks

dropdown

semantic-ui-react

rerender