следуя этому руководству здесь https://www.youtube.com/watch?v=yNiJkjEwmpw&t=1578s при проверке формы formik и столкнувшись с проблемой при реализации проверки
validationSchema: Yup.object().shape({
email: Yup.string().email().required(),
password: Yup.string().min(6).required()
}),
я не получаю сообщений об ошибках в своей локальной среде, нона моем коде и я получаю следующую ошибку
TypeError
Cannot read property 'object' of undefined
, которая довольно прямолинейна, но я недостаточно осведомлена для отладки (все еще нова, чтобы реагировать и формировать) спасибо за всю приведенную ниже помощь, полный исходный кодкод, а также здесь ссылка на коды andbox
https://codesandbox.io/s/kw4x2k62rv
import React from 'react';
//import logo from './logo.svg';
import './App.css';
import { Button, Form, FormGroup, Label, Input, FormFeedback } from 'reactstrap';
import { withFormik, Field } from 'formik';
import Yup from 'yup';
const App = ({
values,
handleChange,
handleSubmit,
errors,
touched
}) =>
(
<Form onSubmit={handleSubmit}>
<FormGroup>
<Label for="fname">First Name</Label>
<Input
value={values.fname}
onChange={handleChange}
type="text"
name="fname"
id="fname"
placeholder="first name"
autoComplete="first name"
/>
</FormGroup>
<FormGroup>
<Label for="lname">Last Name</Label>
<Input
onChange={handleChange}
value={values.lname}
type="text"
name="lname"
id="lname"
placeholder="last name"
autoComplete="last name"
/>
</FormGroup>
<FormGroup>
<Label for="email">Email</Label>
<Input
onChange={handleChange}
value={values.email}
type="email"
name="email"
id="email"
placeholder="email"
autoComplete="email"
/>
{ touched.email && errors.email && <FormFeedback>Oh noes! that name is already taken</FormFeedback> }
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input
onChange={handleChange}
type="password"
value={values.password}
name="password"
id="password"
placeholder="password"
autoComplete="password"
/>
</FormGroup>
<FormGroup>
<Label for="confirmPassword">Confirm Password</Label>
<Input
onChange={handleChange}
value={values.confirmPassword}
type="password"
name="confirmPassword"
id="confirmPassword"
placeholder="confirm password"
autoComplete="confirm password"
/>
</FormGroup>
<FormGroup>
<Label>
<Field type="checkbox" name="tos" checked={values.tos} />
Check me out
</Label>
</FormGroup>
<Button> Submit </Button>
</Form>
)
const FormikApp = withFormik({
mapPropsToValues({ email, password, fname, lname, confirmPassword, tos }) {
return {
email: email || '',
password: password || '',
confirmPassword: confirmPassword || '',
fname: fname || '',
lname: lname || '',
tos: tos || false
}
},
validationSchema: Yup.object().shape({
email: Yup.string().email().required(),
password: Yup.string().min(6).required()
}),
handleSubmit(values) {
console.log(values);
}
})(App)
export default FormikApp;