Автозаполнение MUI AS MULTIPLE input + response-hook-form + управление значениями по умолчанию не работает (TypeError: не удается прочитать свойство 'filter' of undefined)

Я пытаюсь использовать Material-UI Autocomplete в качестве множественного ввода с react-hook-form и control defaultValues автозаполнения динамически (визуализировать компонент предварительно заполненным при редактировании данных на основе уже сохраненных данных, извлеченных из базы данных).

Итак, главный вопрос:

Как лучше всего контролировать значения по умолчанию в компоненте Material-UI Autocomplete и использовать его с react-hook-form?

Что я сделал на данный момент:

  1. Используя функции и хуки в React, я обернул компонент Autocomplete в React Hook Form Controller для управления состоянием. Я попытался реализовать решения из документации MUI и react-hook-form и решения следующих потоков.

    Я создал здесь минимальную песочницу

Что он делает

Когда я устанавливаю defaultValue в Controller, он отображает контролируемое значение по умолчанию, но выдает ошибку: TypeError: Cannot read property 'filter' of undefined

  <Controller
      as={
      <Autocomplete
        multiple
        value={defaultValues}
        onChange={(e, values) => setValue("food", values)}
        ...
        renderInput={params => ( ... )}
      />
    }
    control={control}
    name="food"
    defaultValue={defaultValues} // <- this makes the error
  />

Когда я не устанавливаю defaultValue в Controller, он отлично работает, чтобы иметь возможность выбирать multiple значения, как ожидалось, но не показывает значение по умолчанию.

Что сбивает с толку, так это то, что Autocomplete должен управляться с помощью value/onChange, а Controller должен управляться с помощью defaultValue/setValue, и, похоже, они конфликтуют в моем случае.

  1. Лучше работает при установке defaultValue={ [] } и использовании useEffect и управлении значением по умолчанию только с setValue("food", defaultOption);

    Итак, я создал здесь еще одну песочницу

  2. Благодаря ответу Билла я изменил код на renderProp, как это предлагается в документации:

    Еще одна песочница

    Теперь это работает как шарм, но мне пришлось установить опору onChange для Autocomplete следующим образом:

    onChange={(e, values) => setValue("food", values)}

    вместо того, что предлагали сделать документы: (используя переданный onChange)

    onChange={e => props.onChange(e.something)}

    Это работает, но правильно ли это комбинировать Autocomplete и react-hook-form?

Сравните вопросы с этими темами:

Основное отличие от других потоков, которые я пытаюсь сделать, - установить defaultValues из multiple Autocomplete.

Правильный способ использования response-hook- Контроллер формы с автозаполнением Material-UI

"defaultValue" MUI Autocomplete не работает при использовании с Контроллер react-hook-form

Почему начальное значение не задано в Material UI Autocomplete с помощью формы response-hook?

Рекомендуемое решение в документации react-hook-form:

https://react-hook-form.com/api/#Controller

И код из Material UI docs:

https://material-ui.com/components/autocomplete/#multiple-values ​​< / а>


reactjs material-ui react-hook-form autocomplete
person vindom    schedule 29.07.2020    source источник
comment
рассмотрите возможность использования рендеринга, если вы используете V6.   -  person Bill    schedule 30.07.2020

Ответы (2)


arrow_upward
0
arrow_downward

Я смог заставить это работать, выполнив следующие действия:

                                <Controller
                                    name='test'
                                    control={control}
                                    render={({onChange, ...props}) => (
                                        <AutoComplete
                                            {...props}
                                            data-testid='test-select'
                                            width={350}
                                            label='Auto Complete'
                                            onChange={onChange}
                                            options={eventTypes}
                                            getOptionLabel={(option) => option ? option.name : ''}
                                            renderOption={(option) => option.name }
                                            getOptionSelected={(option) => option.name}
                                            renderInput={(params) => (
                                                <TextField {...params} error={error} helperText={helperText} label={label} placeholder={label} />
                                            )}
                                            onChange={(e, data) => onChange(data)}
                                            {...props}
                                        />
                                    )}
                                />
person Dustin    schedule 24.09.2020
comment
Однако я не нашел способа проверить это с помощью формы реакции-крючка. - person Dustin; 25.09.2020

arrow_upward
0
arrow_downward

Однако я не нашел способа проверить это с помощью формы реакции-крючка.

Вы можете попробовать настраиваемую проверку (в случае, если вы используете автозаполнение MUI с несколькими = {true}):

<Controller
...
rules={{
   validate: (data) => {
     if(data.length === 0) return false;
   }
}}
/>
person mikek    schedule 19.11.2020