Функция автозаполнения пользовательского интерфейса Material getOptionSelected, похоже, не работает, мне нужно руководство

#reactjs #autocomplete #material-ui

Вопрос:

Я использую компонент автозаполнения MUI в многоступенчатой форме

 <Controller
                name="genderId"
                control={control}
                render={({ field: { value, onChange } }) => (
                  <Autocomplete
                    getOptionSelected={(option, value) => option.id === value}
                    value={value}
                    getOptionLabel={(option) => option.name}
                    options={genderTypes}
                    onChange={(e, v) => setValue('genderId', v.id)}
                    renderInput={(params) => (
                      <TextField
                        fullWidth
                        label="Gender"
                        variant="outlined"
                        {...params}
                      />
                    )}
                  />
                )}
              /> 

Мои варианты находятся в этом массиве
[{id: 17, имя: ‘Мужчина’},{id: 18,имя:’Женщина’}]
Когда вы заполняете эту форму и переходите к следующему шагу, состояние обновляется значениями формы. Проблема в том, что, когда я возвращаюсь к шагу, я получаю предупреждение Material-UI о том, что предоставленное значение не имеет соответствующего параметра, а поле пустое.

Ошибка И предупреждение о введенном значении в консоли Я могу решить эту проблему, используя весь объект, а не только идентификатор, но это сэкономит мне несколько строк кода, если я опубликую только идентификатор. Так что же я делаю не так ? Пожалуйста, помогите.

Комментарии:

1. console.log(genderTypes) и покажи мне результат.

2. [{id:17,имя:’Мужчина’,..},{id:18,имя:’Женщина’}]