При использовании React Material-UI & Formik дата типа TextField не обновляется после назначения данных с сервера

Question

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

<Formik
          initialValues={
            props.acdAcademicSession !== undefined &&
            props.acdAcademicSession.academicSessionId !== undefined
              ? {
                  ...props.acdAcademicSession,
                }
              : { ...state }
          }
          enableReinitialize={true}
          onSubmit={onSubmitForm}
          validationSchema={schema}
        >
          {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting,
          }) => (
            <form
              noValidate={true}
              autoComplete="off"
              onSubmit={handleSubmit}
              className={`${formClasses.root}`}
            >                  
              <div className="row">
                <div className="col-6">
                  <TextField
                    type="Date"
                    label="Starting Month"
                    fullWidth
                    margin="normal"
                    variant="outlined"
                    size="small"
                    name="startDate"
                    onBlur={handleBlur}
                    onChange={handleChange}                    
                    value={values.startDate}
                    InputLabelProps={{
                      shrink: true,
                    }}
                    helperText={touched.startDate && errors.startDate}
                    error={Boolean(touched.startDate && errors.startDate)}
                  />
                </div>

              </div>

              form>
          )}
        </Formik>

Answer 1

Надеюсь, что поможет следующее:

1. Установите для параметра enableReinitialize значение true для компонента Formik;
2. Установить начальное состояние для переменной initialValues ​​(useState для тех, кто работает с хуками);
3. Обновите исходные значения до нового внутри вашего побочного эффекта (используйтеEffect для тех, кто работает с хуками или componentDidMount / componentDidUpdate).

Источник: см. здесь и прочитайте больше