javascript - 设置值时会打开 Material UI Autocomplete 免费单独菜单

Question

您好，我在尝试从状态设置自动完成值时遇到自动完成问题。所以 onInput 更改我在状态中设置新值并传递与自动完成值相同的值。

出于某种原因，当我停止输入带有项目的菜单时，即使输入的单词完全不同，它也会为我提供包含所有选项的菜单。

问题与如何在自动完成组件中设置值有关，当我从状态中删除设置值时，一切都按预期工作。

这是我的自动完成组件。

从'react'导入反应导入{TextField}从'@material-ui/core'导入{自动完成}从'@material-ui/lab'

function AutocompleteFreeSolo({
  label = '',
  onInputChange = (_ = {}) => { },
  searchOptions = [],
  value = '',
  error = false,
  helperText = '',
  dataCy = ''
}) {
  return (
    <Autocomplete
      freeSolo
      options={searchOptions.map((option) => option.name)}
      onInputChange={onInputChange}
      data-cy={dataCy}
      renderInput={params => (<TextField {...params} variant="outlined" label={label} error={error} helperText={helperText}/>)}
      value={value}
    />
  )
}

export default AutocompleteFreeSolo

这里被调用

<DialogFormControlLabel
        control={<ChronoAutocompleteFreeSolo
          searchOptions={Object.entries(senderList).map(([key, _]) => ({
            name: senderList[key].email
          }))}
          dataCy={'reply_to'}
          error={replyToFieldError}
          helperText={replyToFieldError ? t('Invalid Email') : ''}
          onInputChange={(_, v) => debounceRequest(v)
          }
          value={replyTo}
        />}
        required
        label={ t('Reply To Address') }
      />

所以在输入变化时触发 debounceRequest

const request = debounce(value => {
    **setStateValue(value)**
  }, 1000)

  const debounceRequest = React.useCallback(value => request(value), [])

我不知道这与去抖动有关还是我以错误的方式设置值？

标签： javascriptreactjsautocomplete