Formikは、onSubmit検証に重複する値を送信している理由を把握することはできません

I'lldoittomorrow：

空の文字列の値を持つオブジェクト内の余分な「firstNameの」プロパティがある以外のonSubmitと私の私のポストのデータがコンソールに送信され、それをすべてルックスの罰金されている実際のデータを記録するとき。だから私はこのようなものが表示されます：

{
  firstName: '',
  lastName: 'foo',
  email: '[email protected]',
  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>
  );
};

それが起こっている理由を理解することはできません、すべてのヘルプは本当にいただければ幸いです！ああ、私もそれがすぐに各フォームの検証メッセージを示すのではなく、それが有効かどう見てぼかしの上に最初にして、その中に型のものにユーザのために待っている問題を抱えていない重要としてではなく - その上の任意のヘルプので、また、素晴らしいことだ:)

ありがとうございました

tudor.gergely：

私はこれがあなたの問題だと思います。

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

それはないFIRSTNAME、firstNameのでなければなりません