Formik 在 onSubmit 上发送了一个重复的值，不知道为什么

Question

当我在 onSubmit 上 post 数据并将正在发送的实际数据记录到控制台时，一切看起来都很好，除了有一个额外的 "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>
  );
};

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

谢谢

Answer 1

我认为这是你的问题：

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

应该是名字，不是名字

Formik 在 onSubmit 上发送了一个重复的值，不知道为什么

Formik is sending a duplicate value on onSubmit, can't figure out why

javascript

reactjs

formik

formik-material-ui