Formik - 将自定义组件的自定义验证插入我当前工作的 Formik 表单中

Question

我有一个包含一些文本输入和一些自定义组件的表单。我已经对文本输入进行了 Formik 验证，但没有对自定义组件进行验证。我现在正在尝试将 Formik 验证添加到我的自定义categoriesMultiselect组件中。该组件将其数据保存在 redux 存储中。我自己处理了验证并为我的 redux 道具添加了一个值：

const mapStateToProps = (

  state: RecordOf<VepoState>,

  ownProps: { rerenderKey: boolean }

) => ({...

    isCategoriesValid: selectIsCategoriesValid(state),

...

})

. 我只想插入props.isCategoriesValid我的 Formik 表单。

通过阅读官方文档，我认为我是通过将validate={validateCategories}作为道具添加到自定义组件并将功能添加validateCategories到组件来实现的。所以我试过这样的：

//above React render()

      validateCategories = () => {

        let error

        if (!this.props.selectIsCategoriesValid) {

          error = 'please select a category'

        }

        return error

      }

// Inside React render()

          <CategoriesMultiselect.View

            validate={this.validateCategories}

            name={'categories'}

            label={'Product Categories'}

            categoryCodes={[CategoryEnums.CategoryCodes.Grocery]}

          />

validateCategories永远不会运行。这就是为什么我通过添加validateField到我的输入onChange函数之一来测试运行它的原因：

      <Input

        label={'Product Brand'}

        value={values.brand}

        onTouch={setFieldTouched}

        error={touched.brand && errors.brand}

        placeholder="Enter Brand"

        name="brand"

        required

        onChange={() => validateField('categories')}

        deleteText={setFieldValue}

      />

当它尝试验证该字段时，我收到控制台错误：

无法读取未定义的属性“验证”

在 Formik 中的这一行代码中：

  var validateField = useEventCallback(function (name) {

if (isFunction(fieldRegistry.current[name].validate)) {

我至少已经将 Formik 插入到我的 Redux 中，因为我至少在提交表单时成功地调度了一个 Redux 操作。我究竟做错了什么？