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

好的，我已经从react语义ui实现了一个可搜索的多选择下拉列表。（）

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

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

返回的数据是一个数组，它将搜索与按下的一个键相匹配，但这不会在新的下拉选项中呈现，并且在重新打开dropbox时，searchquery也会被清除

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

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

constparentcomponent=（）=>{
const[options，setOptions]=useState（）
常量[searchString，setSearchString]=useState（“”）
useffect（（）=>{
const fetchOptions=async（searchString）=>{
//getOptions只是一个异步axios.get，它根据搜索条件返回一个选项数组
const response=wait getOptions（searchString）
设置选项（响应）
}
获取选项（搜索字符串）
}，[searchString]）
const handleSearchChange=（e，search）=>{
setSearchString（（）=>search.searchQuery）
}
返回(
)}

应该可以工作，我将search属性设置为一个函数：

search={（）=>options}

并仅在最后一次用户输入时解析filterCountries

在本例中，当搜索长度为一个字符时，解析需要2秒，但如果不是，则需要500毫秒。因此，如果我键入

a

，然后键入

al

有两个承诺，承诺

al

会快速解析并设置选项，但稍后承诺

a

会解析，如果我不使用

last

，则会覆盖选项

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

应该可以工作，我将search属性设置为一个函数：

search={（）=>options}

并仅在最后一次用户输入时解析filterCountries

在本例中，当搜索长度为一个字符时，解析需要2秒，但如果不是，则需要500毫秒。因此，如果我键入

a

，然后键入

al

有两个承诺，承诺

al

会快速解析并设置选项，但稍后承诺

a

会解析，如果我不使用

last

，则会覆盖选项

---

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

您的回答让我意识到我的主要问题是在下拉组件之外设置searchString的状态（或任何其他状态），使其重新加载，你的回答让我意识到我的主要问题是在下拉组件之外设置searchString的状态（或任何其他状态），使其重新运行，从而使其自身关闭并失去焦点。