如何使用formik验证反应状态？

Question

我有一个包含对象的状态，该对象具有名为firstName的属性。我想通过使用withFormik的validationSchema方法提供对该状态的验证。但是，它无法访问该对象的firstName属性，并且在页面加载时出现以下错误：

TypeError：无法读取未定义的属性“ firstName”

<TextBoxField
  title="Required field: first name"
  label="First Name"
  id="firstName"
  name={`contacts.firstName`}
  ref={input => {
    this.focusInput = input;
  }}
  values={values.contacts.firstName}
  handleChange={handleChange}
  handleBlur={handleBlur}
  errorMessages={errors.contacts.firstName}
  displayError={touched.contacts.firstName && errors.contacts.firstName}
/>

mapPropsToValues: props => {
  return {
    organizationName: '',
    contacts: {
      firstName: ''
    }
  };
}

validationSchema: props =>
    Yup.object().shape({
      organizationName: Yup.string().required('Please enter an organization name')
      contacts: Yup.object().shape({
        firstName: Yup.string().required('Please enter first name')
      })
    })