将 formik 验证错误传递给父组件

Question

我正在创建一个内部有其他 2 个组件的组件，每个组件都有 Formik，我这样做是因为每个内部组件都在模糊上单独提交。

我想做的是，一旦 Formik 验证通过，错误应该显示在父组件中。

这是结构的快速示例：

<ParentComponent>
    <FirstInputField onChange={firstChangeHandler} />
    <Divider />
    <SecondInputField onChange={secondChangeHandler} />
    <ErrorMessages>I WANT ERRORS TO BE HERE</ErrorMessages>
</ParentComponent>

第一种方法是向子组件发送“onError(error)”并调用它来更新父组件上的状态，但我收到了警告。

无法在呈现不同组件 (child) 时更新组件 (parent)

所以我想看看是否有其他方法可以做到这一点。

Answer 1

管理错误状态的上下文 Api 将解决您的问题。

您可以查看类似实现的参考 post。

将 formik 验证错误传递给父组件

Pass formik validation errors to parent component

reactjs

yup

formik