2

遵循本教程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

这很简单，但我的知识不足以调试（对 react 和 formik 来说仍然是新手）感谢所有帮助，下面是完整的源代码&这里是代码和框的链接

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;
4

2 回答 2

1

我不确定为什么它在本地工作而不是在代码沙箱上工作，但我可以告诉你它在代码沙箱上不起作用。

Yup没有默认导出，例如export { string, object etc }. 见：https ://github.com/jquense/yup/blob/master/src/index.js

这样做import Yup from 'yup'就意味着Yup是undefined。如果你想使用 import 语法，你可以这样import * as yup from 'yup'做yup.object()或者使用 require -var yup = require('yup')

于 2018-05-26T21:56:21.530 回答
0 
import * as Yup from 'yup'

不知道为什么会这样，但我遇到了同样的问题，它对我有用。

于 2019-08-27T20:01:58.693 回答