Formik 未呈现初始值

Question

我在我的 React 项目中使用 Formik 提交表单。

const initialValues =
    submittedAssignment !== undefined
      ? {
          comments: submittedAssignment?.comments,
          mk1: mKeys[0],
          mk2: mKeys[1],
          mk3: mKeys[2],
          mk4: mKeys[3],
          mk1Num: submittedAssignment?.mk1Num,
          mk2Num: submittedAssignment?.mk2Num,
          mk3Num: submittedAssignment?.mk3Num,
          mk4Num: submittedAssignment?.mk4Num,
        }
      : {
          comments: "",
          mk1: "",
          mk2: "",
          mk3: "",
          mk4: "",
          mk1Num: 0,
          mk2Num: 0,
          mk3Num: 0,
          mk4Num: 0,
        };

  console.log(initialValues);

return(
<Formik
          initialValues={initialValues}
          validationSchema={Yup.object({
            comments: Yup.string().required(),
            mk1Num: Yup.number().positive().required().max(5),
            mk2Num: Yup.number().positive().required().max(5),
            mk3Num: Yup.number().positive().required().max(5),
            mk4Num: Yup.number().positive().required().max(5),
          })}
          onSubmit={async (values, { setErrors, setSubmitting }) => {
            try {
              values = testFunction(values);
              console.log(values);
              const totalGrade =
                values.mk1Num + values.mk2Num + values.mk3Num + values.mk4Num;
              const response = await updateSubmittedAssignment(
                courseId,
                assignmentId,
                values,
                totalGrade,
                studentId
              );
              if (response.data.data === false)
                setErrors({ err: "Error Submitting. Please contact tech" });
              else {
                setSubmitting(false);
                history.push(
                  `/submittedAssignments/${courseId}/${assignmentId}`
                );
              }
            } catch (error) {
              setErrors({ err: error.message });
            }
          }}
        >
          {({ isSubmitting, submitForm, isValid, errors }) => (
            <Form className="ui form">
              <TextArea
                name="comments"
                placeholder="Enter Comments Here"
                rows={10}                
              />
              <Select
                name="mk"
                placeholder="Select Marking Key"
                options={markingKeys}
                onChange={handleMk}
              />
              <br />
              {mKeys.length > 0 && (
                <Grid>
                  <Grid.Column width={14}>
                    <TextInput name="mk1" id={1} value={mKeys[0]} />
                    <TextInput name="mk2" id={2} value={mKeys[1]} />
                    <TextInput name="mk3" id={3} value={mKeys[2]} />
                    <TextInput name="mk4" id={4} value={mKeys[3]} />
                  </Grid.Column>
                  <Grid.Column width={2}>
                    <TextInput name="mk1Num" type="number" />
                    <TextInput name="mk2Num" type="number" />
                    <TextInput name="mk3Num" type="number" />
                    <TextInput name="mk4Num" type="number" />
                  </Grid.Column>
                </Grid>
              )}

              {errors.err && (
                <Label
                  basic
                  color="red"
                  style={{ marginBottom: 10 }}
                  content={errors.err}
                />
              )}
              <br />
              <Button
                loading={isSubmitting}
                disabled={!isValid || isSubmitting}
                type="submit"
                fluidsize="large"
                color="teal"
                content="Submit"
                onClick={submitForm}
              />
            </Form>
          )}
        </Formik>
)

直到昨天，将TextArea和TextInput中的name属性设置为与initialValues对象中的字段相同就足以显示初始值。但我不知道发生了什么，初始值没有显示出来，虽然当我记录它们时，它们有正确的值。

任何帮助表示赞赏。谢谢

Answer 1

尝试将

enableReinitialize

添加到

Formik

.

<Formik
  enableReinitialize
  ...

您可能会遇到

initialValues

值仅在第一次渲染后才更新的情况。 在第一次渲染时，

Formik

照原样采用

initialValues

，因此如果值尚未更新，您将不会在表单字段中看到它们。

来源： https://formik.org/docs/api/formik#enablereinitialize-boolean

Answer 2

我有同样的问题。只有当我使用 TextInput 的“defaultValue”属性并且我发现它很奇怪时，该值才会显示。我之前做了另一个项目，使用了 formik-material-ui NPM 包中的 TextField，它运行良好。不确定 MUI v5.10.8 中的 TextInput 是否需要 defaultValue。

我还面临另一个问题，在我的 formik 表单上，我有一个 Canvas 元素需要动态更新用户输入的文本，我使用 useState() 挂钩更新这个值（来自级别状态管理）。我注意到的是，每次更新文本元素时，都会刷新其他不相关的 TextInputs 的值。不确定如何避免这种情况。我用 Formik 尝试了 enableReinitialize={false} 和 enableReinitialize 但它没有帮助。