Formik отправляет дублирующее значение на onSubmit, не могу понять, почему - PullRequest
Новая
       25

Formik отправляет дублирующее значение на onSubmit, не могу понять, почему

0 голосов
/ 07 марта 2020

когда я публикую данные на 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>
  );
};

Может ' Я не понимаю, почему это происходит, любая помощь будет очень признательна! О, не так важно, но у меня также есть проблема, когда он показывает сообщение проверки для каждой формы сразу, вместо того, чтобы ждать, пока пользователь наберет что-то сначала в нее, а затем при размытии, чтобы увидеть, действительно ли это - так что любая помощь в этом также было бы здорово:)

Спасибо

1 Ответ

2 голосов
/ 07 марта 2020

Я думаю, что это ваша проблема: 

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

Это должно быть имя, а не имя

...