Question

我试图将this formik code放入create-react-app

这是我的代码，目前得到TypeError: Cannot set property 'props' of undefined，不确定原因。

userForm.js

import React from 'react';
import { Formik } from 'formik';
//import Yup from 'yup';
import * as Yup from 'yup';
import VirtualizedSelect from 'react-virtualized-select';

import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css';
import 'react-virtualized-select/styles.css';

const imaginaryThings = [
  { label: 'Thing 1', value: 1 },
  { label: 'Thing 2', value: 2 },
  { label: 'Thing 3', value: 3 },
  { label: 'Thing 4', value: 4 },
  { label: 'Thing 5', value: 5 },
];

const UserForm = (props) => {
  const {
    values,
    touched,
    errors,
    dirty,
    isSubmitting,
    handleChange,
    setFieldValue,
    handleBlur,
    handleSubmit,
    handleReset,
  } = props;

  const _handleSelect = (selectChoice) => {
    setFieldValue('imaginaryThingId', selectChoice.value);
  };

  return(
    <form className="p-5" onSubmit={handleSubmit}>
      <h1>Hello this is form!</h1>
      <div className="form-group">
        <label>Imaginary Email</label>
        <input name="email" type="text" 
          className={`form-control ${errors.email && touched.email && 'is-invalid'}`}
          value={values.email} 
          onChange={handleChange}
          onBlur={handleBlur} />
        {errors.email && touched.email && <div className="invalid-feedback">{errors.email}</div>}
      </div>
      <div className="form-group">
        <label>Imaginary Username</label>
        <input name="username" type="text" 
          className={`form-control ${errors.username && touched.username && 'is-invalid'}`}
          value={values.username} 
          onChange={handleChange}
          onBlur={handleBlur} />
        {errors.username && touched.username && <div className="invalid-feedback">{errors.username}</div>}
      </div>
      <div className="form-group">
        <label>Imaginary Thing</label>
        <VirtualizedSelect
          name="imaginaryThingId"
          value={values.imaginaryThingId}
          options={imaginaryThings}
          onChange={_handleSelect} />
        <small className="form-text text-muted">
          This is optional
        </small>
      </div>

      <button type="submit" className="btn btn-outline-primary" disabled={isSubmitting}>
        {isSubmitting ? 'WAIT PLIZ' : 'CLICK ME'}
      </button>
    </form>
  );
}

export default Formik({
  mapPropsToValues: (props) => ({ 
    email: props.user.email,
    username: props.user.username,
    imaginaryThingId: props.user.imaginaryThingId,
  }),

  validationSchema: Yup.object().shape({
    email: Yup.string().email('Invalid email address').required('Email is required!'),
    username: Yup.string().required('This man needs a ${path}').when('email', (email, schema) => {
      if (email === 'foobar@example.com') { 
        return schema.label('papidipupi').min(10);
      }
      return schema.label('babidibiba');
    }).test('is-zigzagging', '${path} is not zigzagging', value => value === 'zigzagging'),
  }),

  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      // submit them do the server. do whatever you like!
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
})(UserForm);

App.js

import React from 'react';
import UserForm from './UserForm';

const imaginaryUser = {
  email: '',
  username: '',
  imaginaryThingId: null,
};

function App() {
  return (
    <div className="App">
      <UserForm user={imaginaryUser} />
    </div>
  );
}

export default App;

完整代码：https://github.com/kenpeter/test_formik

Answer 1

从userForm的导出中，将Formik更改为withFormik，并在import语句中也将其替换。

Formik是组件； withFormik创建一个知道mapPropsToValues的高阶组件，其中props引用在错误消息中失败。

来自Formik的文档：

<Formik>是可帮助您构建表单的组件。它使用了诸如React Motion和React Router之类的库流行的渲染道具模式。

还有withFormik()：

withFormik() 创建一个高阶React组件类，该类将prop和表单处理程序（“ FormikBag”）传递到从提供的选项派生的组件中。

withFormik docs

formik：TypeError：无法设置未定义的属性“ props”

1 个答案: