Grommet - 如何在搜索中使用 Select 组件？

问题描述

这是我在 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>
  )
}

预期行为

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

实际行为

如果用户搜索一个类别并选择，那么它会正确显示为选定的选项，但是当用户再次搜索并且选定的选项没有出现在服务器端结果中时（换句话说，不在选项列表中） ) 则所选选项变为空白。

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