TypeError：无法读取Yup中未定义的属性'object'

Question

我的表格是用Formik和Yup制作的。这是错误的屏幕截图：

import React, { Fragment } from "react";

import HelpTooltip from "@reusables/HelpTooltip";

import { withFormik, Formik, Form, Field } from 'formik';

import Yup from 'yup';

const Dimension = ({ values, touched, errors }) => {

    return (
        <Fragment>
            <div className="container">
                <div className="row">
                    <div className="col-md-12 col-page">
                        <h1 className="page-heading">Create Your KLC</h1> 
                        <p>Think of a leadership dimension and area that you want to work on:</p>
                    </div>
                    <div className="col-md-12"> 
                        <Formik>
                            <Form>
                                <div className="form-group">
                                    <p className="form-label">Your Dimension <i className="icon-help"></i></p>
                                    <Field component="select" name="yourDimension" className="form-control">
                                        <option defaultValue>Choose your option</option>
                                        <option value="option1">Option 1</option>                                                           
                                        <option value="option2">Option 2</option>
                                        <option value="option3">Option 3</option>
                                        <option value="option4">Option 4</option>
                                        <option value="option5">Option 5</option>
                                    </Field>  
                                    { touched.yoursDimension && errors.yourDimension && <p>{ errors.yourDimension }</p> }                                      
                                </div>
                                <div className="form-group">
                                    <p className="form-label">Your Area <i className="icon-help"></i></p>
                                    <Field component="select" name="yourArea" className="form-control">
                                        <option defaultValue>Choose your option</option>
                                        <option value="option1">Option 1</option>                                                           
                                        <option value="option2">Option 2</option>
                                        <option value="option3">Option 3</option>
                                        <option value="option4">Option 4</option>
                                        <option value="option5">Option 5</option>
                                    </Field>  
                                    { touched.yourArea && errors.yourArea && <p>{ errors.yourArea }</p> }                                                                           
                                </div>
                                <div className="footer-buttons">
                                    <button type="button" className="btn btn-swans-down-fill btn-back">Cancel</button>
                                    <button type="submit" className="btn btn-tradewind-fill btn-next">Next</button>
                                </div>  
                            </Form>   
                        </Formik>                             
                    </div>
                </div>
            </div>            
        </Fragment>                
    )
}

const FormikApp = withFormik({
    mapPropsToValues({ yourDimension, yourArea }) {
        return {
            yourDimension: yourDimension || 'Choose your option',
            yourArea: yourArea || 'Choose your option'
        }
    },
    validationSchema: Yup.object.shape({
        yourDimension: Yup.string().required(),
        yourArea: Yup.string().required()
    }),
    handleSubmit(values) {
        console.log(values)
    }

})(Dimension)

export default Dimension;

Answer 1

尝试一下：

import * as Yup from 'yup';