Javascript 索环-如何使用搜索选择组件?

Javascript 索环-如何使用搜索选择组件?,javascript,reactjs,grommet,Javascript,Reactjs,Grommet,以下是我在FormField中使用服务器端搜索的Select组件的基本实现: export default function AddProduct() { const [form, setForm] = useState({ category_id: '' }) const [categories, setCategories] = useState([]) const onSearch = string => { const makeRequest = async (

以下是我在FormField中使用服务器端搜索的Select组件的基本实现:

export default function AddProduct() {
  const [form, setForm] = useState({ category_id: '' })
  const [categories, setCategories] = useState([])
  const onSearch = string => {
    const makeRequest = async () => {
      const term = string && string.length ? string.trim() : ''
      const options = { q: term, 'per-page': 1 }
      // Requesting categories based on user's search.
      const res = await API().categories.fetchMany(options)

      try {
        const json = await res.json()
        // Updating the categories list on-the-fly from server-side response.
        setCategories(json.data)
      } catch (e) {
        // ...
      }
    }
    makeRequest()
  }

  return (
    <Box>
      <Form
        value={form}
        onChange={nextForm => setForm(nextForm)}
      >
        <FormField
          name='category_id'
          htmlFor='input-categories'
          label='Categories'
        >
          <Select
            name='category_id'
            // Dispatches the first request (usability only) in order to prevent
            // user from viewing an empty list.
            onOpen={onSearch}
            onSearch={onSearch}
            // Options are always the filtered list from server-side.
            options={categories}
            labelKey="name"
            valueKey={{ key: 'id', reduce: true }}
          />
        </FormField>
      </Form>
    </Box>
  )
}
导出默认函数AddProduct(){
const[form,setForm]=useState({category_id:''})
常量[categories,setCategories]=useState([])
const onSearch=string=>{
const makeRequest=async()=>{
const term=string&&string.length?string.trim():“”
const options={q:term,‘每页’:1}
//根据用户的搜索请求类别。
const res=await API().categories.fetchMany(选项)
试一试{
const json=await res.json()
//从服务器端响应动态更新类别列表。
setCategories(json.data)
}捕获(e){
// ...
}
}
makeRequest()
}
返回(
集合形式(nextForm)}
>
)
}
预期行为

我希望用户可以无限期地搜索和选择选项,而当选项数组中不存在选定选项时,该选项不会变为空白

实际行为

如果用户搜索某个类别并选择该类别,则该类别将正确显示为所选选项,但当用户再次搜索且所选选项未显示在服务器端结果上(换句话说,未显示在选项列表中)时,所选选项将变为空

1。在这里,我有意每次搜索只呈现一个结果。

2。首先,我选择“Tijolo”类别。

3。然后我换成“Ferro”。

4。上一步,我再次打开选择下拉列表,它发送一个请求“onOpen”事件,“Ferro”不在结果页面中,然后它的选项变为空白。

正如我现在看到的,“onSearch”事件似乎并没有使它变为空白,但“onOpen”却使它变为空白。我想知道为什么(?)

有人知道如何处理“onOpen”和“onSearch”事件,在套圈选择组件中呈现动态选项吗

索环版本:2.17.2