使用 React Material-UI 和 Formik，TextField 类型日期在从服务器分配数据后不会更新答案

【问题标题】：Using React Material-UI & Formik, TextField type date does not update after assign data from server使用 React Material-UI 和 Formik，TextField 类型日期在从服务器分配数据后不会更新
【发布时间】：2020-08-16 09:42:38
【问题描述】：

我有以下形式，在选择新日期并查找表单提交时工作正常。但是当我从服务器获取表单值并分配表单值进行编辑时，日期字段不会显示任何值。

<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>

【问题讨论】：

你能删除所有不相关的数据并保留一个最小的工作示例吗？

标签： reactjs material-ui formik

【解决方案1】：

希望以下对您有所帮助：

在 Formik 组件上将 enableReinitialize 设置为 true；
为initialValues 变量设置一个初始状态（使用钩子的用户使用useState）；
将初始值更新为您身边的新值效果（useEffect 用于使用钩子或 componentDidMount 的人 /componentDidUpdate)。

来源：见here and read more

【讨论】：