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



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

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

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

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

我真的不知道如何在不改变状态的情况下进行后端搜索,这会导致重新发布并清除所有内容。有什么建议吗?

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}
/>
)}

以下操作应该有效,我将搜索属性设置为函数:search={() => options},并仅在最后一次用户输入时解析filterCountrys。

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

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

相关内容

  • 没有找到相关文章

最新更新