Блог

У меня вызван компонент form.js . Компонент имеет два состояния: состояние обновления и состояние создания. Там у меня есть AutoComplete компонент. Он отлично работает с состоянием создания. (Создание данных работает нормально)

Но когда я пытаюсь использовать тот же компонент, что и компонент обновления. customerId правильно установлено для состояния компонента. Но не показывает имя соответствующего клиента в AutoComplete поле.

 const agents = [
  { name: "Pathum", id: 1 },
  { name: "Chamod", id: 2 },
  { name: "Avishka", id: 3 }
];

<FormControl style={{width:'100%'}}>
                          <Autocomplete
                            id="combo-box-demo"
                            options={agents}
                            getOptionLabel={(option) => option.name}
                            style={{ width: '100%' }}
                            onChange={(e, v) => {
                              if (v) {
                                setFieldValue("customerId", v.id);
                              } else {
                                setFieldValue("customerId", "");
                              }
                            }}
                            renderInput={(params) => {
                              return (
                                <TextF
                                  {...params}
                                  label="Combo box"
                                  variant="outlined"
                                />
                              );
                            }}
                          />
                        </FormControl>
  

Я передаю этот массив агентов компоненту автозаполнения. Выбран идентификатор пользователя 3. Поэтому в идеале я хочу видеть имя Avishka в компоненте автозаполнения, вместо этого оно пустое.

Надеюсь, мой вопрос понятен всем. Это полный код https://codesandbox.io/s/material-demo-forked-z8kjq?file=/demo.js:1842-1949

Поскольку ваш Autocomplete не контролируется и используется в основном для ваших форм, просто назначьте defaultValue

 <Autocomplete
  defaultValue={agents[2]}
/>
  

В качестве альтернативы вы можете переключиться на управляемый компонент. Значение будет основано на Formik values

 <Autocomplete
  value={agents.find((agent) => agent.id === values.customerId)}
/>