如何处理子组件的 YUP 验证 (ReactJS)

如何解决如何处理子组件的 YUP 验证 (ReactJS)

我正在使用 reactjs 和 lib unform 来处理我的应用程序的注册表结构。我需要用动态输入做一个更复杂的结构，然后，我做了一个分离的组件来使代码更有条理，到目前为止一切都很好，但是当我用 yup 进行验证时，我注意到子组件的字段没有得到我认为会得到的错误。

有没有人知道一个聪明的解决方案？

结果：只有主组件的字段有验证错误。

See the image

这里是主窗体结构的代码：

const CadastroAdvF3: React.FC = () => {

  const { addToast } = usetoast();

  const formRef = useRef<FormHandles>(null);

  const handleSubmit = useCallback(
    async data => {

      formRef.current?.setErrors({});

      try {

       // validation

        const schema = Yup.object().shape({
          professionalDescription: Yup.string()
            .required('Descrição profissional obrigatória')
            .min(
              300,'A descrição profissional deve ter no mínimo 300 caracteres.'
            ),// the following itens are inside the react component formationArea
          // and professionalExperience.

          institution: Yup.string().required('Instituição Obrigatória'),course: Yup.string().required('Curso Obrigatório'),from: Yup.string().required('Data Obrigatória'),until: Yup.string().required('Data Obrigatória'),role: Yup.string().required('Cargo Obrigatório'),business: Yup.string().required('Empresa/Instituição Obrigatória')
        });

        await schema.validate(data,{
          abortEarly: false
        });

        addToast({
          title: 'Informações regisTradas com sucesso.',type: 'success'
        });
      } catch (error) {
        const errors = getValidationErrors(error);
        formRef.current?.setErrors(errors);
      }
    },[addToast]
  );

  return (
    <Styled.Container>
      
      <Styled.Content>
        <Styled.Form>
          <h3>Formulário</h3>

          <Form
            ref={formRef}
            onSubmit={data => {
              handleSubmit(data);
            }}
          >
            {/* <div className="twoColumns">
              <Input row name="firstName" placeholder="Nome" />
              <Input row name="lastName" placeholder="Sobrenome" />
            </div> */}
            <Input label="Foto de Perfil" name="profilePhoto" type="file" />
            <TextArea
              name="professionalDescription"
              label="Descrição Profissional"
              placeholder="Sua descrição profissional..."
            />


            <FormationArea />

            <ProfessionalExperience />

            <SuperButton type="submit">Próximo</SuperButton>
          </Form>
        </Styled.Form>
      </Styled.Content>
    </Styled.Container>
  );
};

export default CadastroAdvF3;

以及 FormationArea 组件的结构示例：

const FormationArea: React.FC = () => {

  // ...

  return (
    <context.Provider value={{ handleRemoveFormationArea }}>
      <Styled.Container>
        <div className="header">
          <h3>Formação</h3>
          <button type="button" onClick={handleAddFormationArea}>
            Adicionar Instituição
          </button>
        </div>
        {formationAreaFields.map((formationAreaFields,index) => {
          return <Item key={index} Pkey={index} />;
        })}
      </Styled.Container>
    </context.Provider>
  );
};

 // above the component that is rendered in the formation area

const Item: React.FC<KeyComponentProp> = ({ Pkey }) => {

 // ....

  return (
    <CourseAreasContext.Provider
      value={{ handleRemoveCourseArea,handleAddCourseArea }}
    >
      <div className="item">
        <Scope path={`formation[${Pkey}]`}>
          {/* <h4>Instituição</h4> */}
          <Styled.PersonalizedColumnsFormation>
            <Input
              label="Instituição"
              name="institution"
              placeholder="Instituição"
            />
            {Pkey > 0 && (
              <button
                type="button"
                onClick={() => handleRemoveFormationArea(Pkey)}
              >
                <TiTrash size={23} />
              </button>
            )}
          </Styled.PersonalizedColumnsFormation>
          {CourseAreaFields.map((course,index) => {
            return <DownScopeAreas key={index} Pkey={index} />;
          })}
        </Scope>
      </div>
    </CourseAreasContext.Provider>
  );
};

export default FormationArea;