Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Why this useFormik is updating the initial value by itself?

$
0
0

I got component structure like this. The actual code is not like this I am just trying to help you visualize.

<EditAssessment><AssessmentForm><AssessmentScheduleCronWeekField></AssessmentScheduleCronWeekField></AssessmentForm></EditAssessment>

The thing is when I pass the value from EditAssessment to child component, useformMik is changing the value.

EditAssessment component// logging the initial value       {console.log(          (study.phases[Number(phaseIndex)] as AssessmentPhase).assessments[            Number(assessmentIndex)          ]       )}        {loading ? (<Loading size="large" label="Saving..." />        ) : (<AssessmentForm            initialValues={              (study.phases[Number(phaseIndex)] as AssessmentPhase).assessments[                Number(assessmentIndex)              ] as Assessment            }            onSubmit={onSubmit}            onCancel={onDone}          />        )}

Here is the AssessmentForm component

import { Field, FormikProvider, useFormik } from 'formik';export const AssessmentForm = ({  initialValues,  onSubmit,  onCancel,}: AssessmentFormProps) => {  const [scheduleType, setScheduleType] = useState('empty');  const formik = useFormik({    initialValues,    onSubmit,    validationSchema,  });  // *** THE VALUE CHANGE HERE, THIS IS IMPORTANT ***  console.log(initialValues.schedule);  console.log(formik.values.schedule);  return (<FormikProvider value={formik}><Form data-cy="assessment-form" onSubmitCapture={formik.handleSubmit}>        {/* Assessment Questionnaire ID Field */}<Field name="questionnaireId" component={AssessmentQuestionIdField} /><div>Hello</div>        {/* Assessment Schedule Type Form */}<AssessmentScheduleTypeForm          assessmentSchedule={initialValues.schedule}          onTypeChange={setScheduleType}        /><div>Hello 1</div>        {/* Various Assessment Schedule Forms */}        {(() => {          let component = undefined;          switch (scheduleType) {            case 'oneTime':              component = AssessmentScheduleOneTimeField;              break;            case 'cronWeek':              component = AssessmentScheduleCronWeekField;              break;          }          if (component !== undefined) {            return <Field name="schedule" component={component} />;          }          return (<Empty              image={Empty.PRESENTED_IMAGE_SIMPLE}              description={<p>Select a Schedule Type</p>}            />          );        })()}<AssessmentFormScheduleDescription schedule={initialValues.schedule} />        {/* Combined Form using `useFormik() */}</Form></FormikProvider>  );};

As you can see there are two console.log statement places 1 in EditAssement and inAssessmentForm`

The value passing to the AssessmentForm change automatically and idk why

Here is a screen shot

enter image description here

These console.log when I reach to the path. If you line 53 console.log is coming from useformMik and that one is updating the value


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>