Блог

Главная - Вопросы по программированию - Как использовать значения из исходных значений Formik и передавать их обратно в React Select?

Как использовать значения из исходных значений Formik и передавать их обратно в React Select?

#javascript #arrays #reactjs #formik #react-select

Вопрос:

В настоящее время я реализовал средство установки начальных значений для моей формы из вызова API, которое работает нормально, но в настоящее время я сталкиваюсь с проблемой повторного заполнения моего react-select поля из моих начальных значений.

На данный момент мои начальные значения (фрагмент) из вызова API fetch выглядят следующим образом:

 const emptyGroup = {
       groupName: "",
       groupValues: []
}

const INITIAL_FORM_STATE = {
  myName: '',
  allGroups: [emptyGroup]
};

"allGroups": [
    {
      "groupName": "Group Astro",
      "groupValues": [
           {
             "value": "My Group A",
             "label": "My Group A"
           },
           {
             "value": "My Group B",
             "label": "My Group B"
           }
      ]
    }
]

Ниже приведен мой компонент react-select:

 <ReactSelect
   options={ myGroupOptions }   
   isMulti={true}
   name={`allGroups.${index}.groupValues`}
   onChange={(option) => formikProps.setFieldValue({`allGroups.${index}.groupValues`}, option.value)}
   onBlur={formikProps.handleBlur}
   value={ ????? }
 />

В чем я не уверен, так это в том, как мне передать значения из groupValues приведенного выше массива обратно value={ ?????? } , чтобы при визуализации этого <ReactSelect /> компонента он отображал значения: My Group A My Group B внутри него?

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

1. Не могли бы вы создать минимальную воспроизводимую проблему в песочнице? Здесь -> > codesandbox.io

2. Ну, вам нужно обновить состояние, в formik котором, в свою очередь, будет обновляться состояние в вашем react-select, так formik как содержит все значения вашей формы.

3. @PrateekThapa — formik состояние настроено правильно , но в порядке для react-выберите, чтобы забрать groupValues , мне нужно извлечь это, в value чем я не уверен. Нужно ли выполнять какой-то тип обработки массива по значению?

4. @PrateekThapa — удалось решить мою проблему в соответствии с моим ответом ниже

Ответ №1:

На всякий случай, если кто-то еще столкнется с этой проблемой/запросом, мне удалось решить проблему следующим образом для value значений вместе с formik:

 <ReactSelect
   options={ myGroupOptions }   
   isMulti={true}
   name={`allGroups.${index}.groupValues`}
   onChange={(option) => formikProps.setFieldValue({`allGroups.${index}.groupValues`}, option.value)}
   onBlur={formikProps.handleBlur}
   value={values.allGroups[index].groupValues}
 />
Метки: