Tengo la siguiente configuración de valores iniciales de Formik:

 const INITIAL_VALUES = { taskName: 'Test', taskNotes: 'Some notes', areaGroups: [ { name: Area Group 1, areaInfo: [ { areaName: "Area 1", areaCode: null } ] } ] };

Lo que estoy haciendo entonces es proporcionar al usuario la opción de cargar un archivo CSV para evitar que el usuario areaInfo más datos de información de área a través del formulario de interfaz.

El siguiente código parece agregar los valores CSV cargados a la matriz areaInfo , que puedo ver desde una console.log(values) pero en realidad no actualiza/actualiza los INITIAL_VALUES arriba o forma.

Sin embargo, la cuestión es que cuando hago clic en el campo de formulario areaName dentro de la matriz areaInfo , luego se actualiza y muestra mis datos CVS cargados, pero no los muestra después de seleccionar el archivo csv para cargar/analizar.

El código de mi componente para esto es el siguiente y usa los paquetes react-dropzone y papaparse npm:

 const PerformUpload = ({ values }) => { const formikProps = useFormikContext() const classes = useStyles(); const onDrop = useCallback(acceptedFiles => { acceptedFiles .filter((file) => file.type === "text/csv") .forEach(async (file) => { const text = await file.text(); const result = parse(text, { header: true }); const myData = result.data myData.map((data) => ( values.areaGroups[0].areaInfo.push( { "areaName": data.areaname, "areaCode": data.areacode } ) )) }); }, []); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); return ( <React.Fragment> <section className="container"> <div {...getRootProps({className: 'dropZone'})}> <input {...getInputProps()} /> <p>Drag files here or click to select a file</p> </div> </section> </React.Fragment> ) }

Estoy realizando el envío a la matriz de values.areaGroups[0].areaInfo , pero no estoy seguro de si esto es correcto, ya que no actualiza los valores iniciales/frontend hasta que hago clic físicamente en el campo.

FYI, este componente PerformUpload se llama desde dentro:

 <Formik enableReinitialize={true} initialValues={INITIAL_VALUES} ....

¿No estoy seguro de lo que me estoy perdiendo/haciendo mal?