我想要错误对象的父从子在formk?

Question

这是我的父组件

<FormContainer
initialFieldValues={id != undefined ? cvRecord : cvFormFields}
formData={getFieldsByCategory(cvFormFields, selectOption.type)}
formValidation={cvFormFields}
// onFormSubmit={onFormSubmit}
>
{/* button group */}
<div className="text-md-end mt-5">
<button className="btn btn-primary ms-2 mb-2" type="submit">
Save <i className="bi bi-file-earmark-fill" />
</button>
<button
type="button"
className="btn btn-danger ms-2 mb-2"
data-bs-toggle="modal"
data-bs-target="#cvdownloadmodal"
>
<i className="bi bi-eye me-1" />
Preview and Download
</button>
</div>
</FormContainer>

这是子组件

import { Form, Formik, useFormikContext } from "formik";
import React, { useMemo } from "react";
import GenerateFields from "./GenerateFields";
import { getFormInitialValue, getFormValidations } from "./utility/formUtils";
import * as Yup from "yup";
import { toast } from "react-toastify";
const FormContainer = ({
initialFieldValues = [],
formData = [],
onFormSubmit = "",
formValidation = [],
extraInputClass = "",
children,
...otherProps
}) => {
// Toggle Validations
const withValidation = formValidation ? true : false;
// Get form Initial Value
const initialValues = Array.isArray(initialFieldValues)
? getFormInitialValue(initialFieldValues)
: initialFieldValues;
// Get Form Validaton Schema
const validationSchema = Yup.object().shape(
getFormValidations(formValidation)
);
return (
<Formik
initialValues={initialValues}
validationSchema={withValidation ? validationSchema : ""}
onSubmit={
onFormSubmit
? onFormSubmit
: (val, { errors }) => {
console.log("🚀 ~ file: FormContainer.jsx:38 ~ val", errors);
setFormValues([...formValues, val]);
}
}
enableReinitialize={true}
>
{(formAttributes) => (
<Form className="formikContainer row m-2">
{formData.map((fieldAttribute, index) => {
return (
<GenerateFields
key={index}
inputAttributes={fieldAttribute}
formActions={formAttributes}
withValidation={withValidation}
/>
);
})}
{children && children}
</Form>
)}
</Formik>
);
};
export default FormContainer;

这是我的输出

my result screen

现在我想在父组件中获得一个错误对象，该对象用于显示需要验证的红色区域，例如，如果用户只输入基本信息并尝试提交表单，则剩余部分变为红色，因为用户在剩余部分中留下空白字段。有人知道怎么解决这个问题吗?

我期望在我的项目中有帮助的逻辑

Answer 1

import React, { useEffect, useState } from 'react'
function ChildrenComponant({ setError }) {
return (
<div>
{/* error from formik */}
{({ error }) => {
setError(error)
}}
</div>
)
}
function Parent() {
const [error, setError] = useState({ message: "" })
useEffect(() => {
// some function or re-render logic after error change
}, [error])
return (
<div>
{/* show error message */}
<div>{error.message}</div> 
{/* Passing setError prop to child so that error can be set from children and accessed in parent */}
<ChildrenComponant setError={setError} />
</div>
)
}
export default Parent