+-
使用React Material-UI & Formik,TextField类型的日期在从服务器分配数据后不更新。

我有以下表单,当选择一个新的日期并在表单提交时发现它工作正常。但是当我从服务器上获取表单值并将表单值分配给编辑时,日期字段没有显示任何值。

<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>
1
投票

希望下面的内容能帮到你。

将Formik组件的enableReinitialize设置为true。 为initialize变量设置一个初始状态(对于使用钩子的人来说,使用State)。 在你的sideeeffect中更新初始值为新的状态(使用Effect为谁在使用hooks或componentDidMount componentDidUpdate)。

源。参见 在这里,阅读更多