在每次按键时使用 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 逻辑来缓存任何一种方式。
好的,我已经从 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 逻辑来缓存任何一种方式。