Actualmente he implementado un medio para establecer mis valores iniciales de Formik a partir de una llamada API que funciona bien, pero actualmente tengo un problema al volver a llenar mi campo de react-select partir de mis valores iniciales.
Por el momento, mis valores iniciales (fragmento) de la llamada de búsqueda de API se ven así:
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" } ] } ]A continuación se muestra mi componente de selección de reacción:
<ReactSelect options={ myGroupOptions } isMulti={true} name={`allGroups.${index}.groupValues`} onChange={(option) => formikProps.setFieldValue({`allGroups.${index}.groupValues`}, option.value)} onBlur={formikProps.handleBlur} value={ ????? } /> Lo que no estoy seguro es cómo introduzco los valores de la matriz groupValues anterior en value={ ?????? } para que cuando este <ReactSelect /> se represente, muestre los valores: My Group A ¿ My Group B dentro de él?
En caso de que alguien más se encuentre con este problema/consulta, logré resolver el problema de la siguiente manera por value junto con los valores de 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} />