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 object 中的字段相同，足以显示初始值。 但我不知道发生了什么，初始值没有显示，虽然当我记录它们时，它们有正确的值。

任何帮助表示赞赏。 谢谢

Answer 1

尝试将enableReinitialize添加到Formik 。

<Formik
  enableReinitialize
  ...

您可能会遇到仅在第一次渲染后才更新initialValues值的情况。 在第一次渲染时， Formik会按原样获取initialValues值，因此如果值尚未更新，您将不会在表单字段中看到它们。

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