Formik＆Yup-使用Yup.object（）。required（）时，字段未添加到props.errors中

Question

由于某种原因，无论如何我的GroceryStore字段都不会添加到props.errors formik对象中。它是必填字段，因此，当该字段未定义时，是什么导致该字段从未添加到formik props.errors对象中的呢？ GroceryStore确实出现在props.touched和props.values格式对象中。

在以下代码的<LocationAutocomplete中设置了该字段：

class AddGroceryItemView extends React.Component {
  render() {
    const {
      values,
      handleSubmit,
      setFieldValue,
      errors,
      touched,
      setFieldTouched,
      isValid,
      isSubmitting
    } = this.props

    return (
      <Container>
        <VepoHeader title={'Add Vegan Grocery Product'} />
        <Container style={container}>
          <ScrollView
            keyboardShouldPersistTaps="always"
            style={viewStyle(this.props.locationListDisplayed).scrollView}>
            <LocationAutocomplete
              label={'Grocery Store'}
              placeholder={'Enter Grocery Store'}
              setFieldTouched={setFieldTouched}
              setFieldValue={setFieldValue}
              name="GroceryStore"
              required
              error={errors.GroceryStore}
              touched={touched.GroceryStore}
            />
            <View style={viewStyle().detailsContainer}>
              <Input
                label={'Product Name'}
                onTouch={setFieldTouched}
                value={values.Name}
                placeholder="Enter Name"
                name="Name"
                required
                error={touched.Name && errors.Name}
                deleteText={setFieldValue}
                onChange={setFieldValue}
              />
              <Input
                label={'Product Brand'}
                value={values.Brand}
                onTouch={setFieldTouched}
                error={touched.Brand && errors.Brand}
                placeholder="Enter Brand"
                name="Brand"
                required
                onChange={setFieldValue}
                deleteText={setFieldValue}
              />
              <View>
                <Input
                  label={'Product Description'}
                  value={values.Description}
                  placeholder="Enter Description"
                  multiline={true}
                  required
                  onTouch={setFieldTouched}
                  error={touched.Description && errors.Description}
                  numberOfLines={4}
                  name="Description"
                  deleteText={setFieldValue}
                  onChange={setFieldValue}
                />
                <Input
                  isValid={true}
                  isPrice={true}
                  label={'Product Price'}
                  value={values.Price}
                  onTouch={setFieldTouched}
                  error={touched.Price && errors.Price}
                  placeholder="Enter Price"
                  name="Price"
                  deleteText={setFieldValue}
                  onChange={setFieldValue}
                />
                <CategoriesMultiselect.View
                  error={errors.Categories}
                  setFieldValue={setFieldValue}
                  setFieldTouched={setFieldTouched}
                  touched={touched.Categories}
                  name="Categories"
                  required
                  label="Product Categories"
                  categoryCodes={[CategoryEnums.CategoryCodes.Grocery]}
                />
                <ImagePicker
                  label="Product Image"
                  setFieldValue={setFieldValue}
                  name="Image"
                />
              </View>
            </View>
          </ScrollView>
        </Container>
        <Button.View
          title="submit"
          onPress={handleSubmit}
          label={'GO!'}
          disabled={!isValid || isSubmitting}
          loading={isSubmitting}
        />
      </Container>
    )
  }
}

const container = {
  flex: 1,
  ...Spacing.horiz_pad_md_2,
  backgroundColor: Colors.grey_lite,
  flexDirection: 'column'
}

const formikEnhancer = withFormik({
  validationSchema: Yup.object().shape({
    Name: Yup.string().required(),
    Brand: Yup.string().required(),
    GroceryStore: Yup.object()
      .shape({
        city: Yup.string(),
        latitude: Yup.number(),
        longitude: Yup.number(),
        name: Yup.string(),
        place_id: Yup.string(),
        street: Yup.string(),
        street_number: Yup.string(),
        suburb: Yup.string()
      })
      .required(),
    Image: Yup.object().shape({
      uri: Yup.string(),
      name: Yup.string(),
      type: Yup.string()
    }),
    Categories: Yup.array()
      .min(1, 'Please select at least 1 Category')
      .required(),
    Description: Yup.string()
      .min(9)
      .required(),
    Price: Yup.string().matches(
      /^\d+(?:\.\d{2})$/,
      'Price must contain 2 decimal places (cents) e.g. 4.00'
    )
  }),
  isInitialValid: false,
  mapPropsToValues: () => ({
    Name: '',
    Brand: '',
    Description: '',
    Price: '',
    Categories: [],
    GroceryStore: {},
    Image: {}
  }),
  handleSubmit: (values, { props }) => {
    handleSubmit(values, props)
  },
  displayName: 'AddGroceryItemView'
})(AddGroceryItemView)

// $FlowFixMe
const AddGroceryItemViewComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(formikEnhancer)

export default AddGroceryItemViewComponent

我认为没有必要查看LocationAutocomplete的实现，因为无论是否输入该值，我们都应该在props.errors的{​​{1}}中看到一个错误。但是无论如何这里是

GroceryStore