Задать вопрос
Gimir
@Gimir
JavaScript dev

Как связать инпут из react-autosuggest с react-hook-form?

Добрый вечер! У меня на странице есть инпут из библиотеки react-autosuggest, контролируемый. Хочу добавить валидацию и исключить ненужные рендеры с помощью библиотеки react-hook-form. Хотя на в документации react-hook-form и есть инструкция как интегрировать ее в сторонние библиотеки, у меня это не получается, вот как я это делаю:
const { handleSubmit, reset, control } = useForm();

<Controller
    control={control}
    name="some_name"
    render={({ onChange, onBlur, value, name }) => (
       <SuggestInput
       onInputChange={onChange}
       inputValue={value}
       name={name}
       getSuggestions={getSuggestions}
       />
     )}
/>


Вот компонент SuggestInput:
const SuggestInput = ({ onInputChange, inputValue, getSuggestions, name }) => {

    const [ options, setOptions ] = useState([]);

    const inputProps = {
        value: inputValue,
        onChange: (event, {newValue}) => onInputChange(newValue)
    }
    const getSuggestionValue = suggestion => suggestion.name;

    const renderSuggestion = suggestion => (
    <SuggestWrapper>
        {suggestion.name}
    </SuggestWrapper>
    );
    const renderInputComponent = (inputProps) => <input type="text" {...inputProps} name={name} />

    const onSuggestionsFetchRequested = ({ value }) => {
        getSuggestions(value).then(suggestions => setOptions(suggestions))
    };
    const onSuggestionsClearRequested = () => setOptions([])

    return <Autosuggest
            renderInputComponent={renderInputComponent}
            suggestions={options}
            onSuggestionsFetchRequested={onSuggestionsFetchRequested}
            onSuggestionsClearRequested={onSuggestionsClearRequested}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
            theme={theme}
        />
}


Я получаю такую ошибку когда компонент рендерится:
Uncaught TypeError: Cannot read property 'trim' of undefined в компоненте SuggestInput

Как связать этих двух что-бы все работало как надо?
  • Вопрос задан
  • 191 просмотр
Подписаться 1 Средний Комментировать
Решение пользователя Gimir К ответам на вопрос (1)
Gimir
@Gimir Автор вопроса
JavaScript dev
Надо было добавить defaultValue компоненту контроллера, Autosuggest пытался вызвать метод trim на undefined, по этому была ошибка.
Ответ написан