0

当我在 onSubmit 上发布数据并将正在发送的实际数据记录到控制台时，一切看起来都很好，只是对象中有一个额外的“firstName”属性，其值为空字符串。所以我会看到这样的东西：

{
  firstName: '',
  lastName: 'foo',
  email: '1@2.com',
  password: 'bar',
  firstName: 'baz'
}

这是相关的代码位：

    // Signup.jsx
        <Formik
          initialValues={{
            firstname: '',
            lastName: '',
            email: '',
            password: '',
          }}
          onSubmit={handleSubmit}
          validationSchema={validationSchema}
        >
          {({ dirty, isValid }) => {
            return (
              <Form className={classes.form}>
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={6}>
                    <FormikField name="firstName" />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <FormikField name="lastName" />
                  </Grid>
                  <Grid item xs={12}>
                    <FormikField name="email" />
                  </Grid>
                  <Grid item xs={12}>
                    <FormikField name="password" />
                  </Grid>
                </Grid>

                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                  disabled={!dirty || !isValid}
                >
                  Sign Up
                </Button>
                <Grid container justify="flex-end">
                  <Grid item>
                    <Link to="/signin" variant="body2">
                      Already have an account? Sign in
                    </Link>
                  </Grid>
                </Grid>
              </Form>
            );
          }}
        </Formik>

这是 Formik 字段：

// FormikField.js
const FormikField = ({ name, required, fullWidth, variant }) => {
  return (
    <div>
      <Field
        as={TextField}
        label={name}
        id={name}
        name={name}
        required={required}
        fullWidth={fullWidth}
        variant={variant}
        autoFocus
        helperText={<ErrorMessage name={name} />}
      />
    </div>
  );
};

无法弄清楚为什么会这样，任何帮助将不胜感激！哦，没那么重要，但我也遇到了一个问题，它会立即显示每个表单的验证消息，而不是等待用户先在其中输入一些内容，然后再模糊查看它是否有效——所以对此有任何帮助也会很棒:)

谢谢

4

1 回答 1

2

我认为这是你的问题：

        <Formik
          initialValues={{
            firstname: '', <-- you have a typo (small n) 
            lastName: '',
            email: '',
            password: '',
          }}

它应该是名字，而不是名字

于 2020-03-07T10:33:15.510 回答