React Formik 및 Yup 문제 해결 팁

저는 지난 몇 주 동안 React Native 앱에서 양식을 렌더링하는 방법을 재작업하는 데 보냈습니다. 이에 대한 주요 동인은 곧 출시할 새로운 기능으로, 사용자에게 150개 이상의 질문을 해야 합니다. 코드 중복을 최소화하고 앞으로 더 쉽게 양식 질문을 편집하기 위해 우리는 큰 JSON 파일에서 다양한 양식과 해당 질문을 프로그래밍 방식으로 렌더링하는 경로를 따르기로 결정했습니다.

이러한 방식으로 양식을 렌더링한다는 것은 . 이전 시스템에서 사용자를 마이그레이션할 예정이므로 유효성 검사가 필요한 기존 데이터가 미리 채워진 특정 양식의 요소도 있습니다.

지금까지는 모든 것이 잘 작동하는 것처럼 보이지만 빌드하는 동안 메모할 수 있는 몇 가지 문제가 있었습니다. 이것은 과거에 이와 동일한 문제를 겪었지만 잊어버렸기 때문에 주로 미래의 자신을 위한 것입니다. 그래서 여기 미래의 자신을 잠시 구하려고 합니다. 😃

문제: 양식에 데이터가 미리 채워져 있고 구성 요소 탑재 시 유효성 검사가 작동하지 않는 경우

validateOnMount={true} 구성 요소 소품 내에서 Formik를 설정했는지 확인하십시오. 또한 제출 버튼을 활성화하기 위한 추가 검사로 formikProps.dirty를 포함하지 않았는지 확인합니다. 😂

<Formik
  validateOnMount={true}
  initialValues={initialValues}
  onSubmit={onSubmit}
  validationSchema={validationSchema}
  ...
>
 {(formikProps) => {
  return (
    <Form...

문제: 모든 필드 유효성 검사가 예상대로 작동하는 것은 아닙니다.

각 필드 값을 최소한 빈 문자열로 초기화했는지 확인하십시오. 그렇지 않으면 Yup은 필드가 존재한다는 것을 알지 못하고 유효성을 검사할 수 없습니다.

컨텍스트의 경우 특정 기준이 충족되는 경우에만 필요한 일부 조건부 필드가 있습니다. 이 필드는 양식 구성 요소가 마운트될 때 초기화되지 않았기 때문에 무시되었습니다.

문제: 양식 구성 요소 외부에서 formikProps에 액세스하는 방법

달성하려는 구체적 내용에 따라 몇 가지 방법이 있습니다.

양식의 자식 구성 요소 내에서 formikProps에 액세스해야 하는 경우 이를 소품으로 전달하거나 useFormikContext() hook 을 사용할 수 있습니다.

양식 구성 요소 수준에서 formikProps에 액세스해야 하지만 렌더링 메서드 외부에 있는 경우 Reactref를 만들고 innerRef Formik 속성을 사용하여 양식을 참조하고 Formik 메서드에 액세스합니다.

export const MyForm = () => {

  const formRef = useRef(null);

  const handleSubmit = () => {
    if (formRef.current) {
      formRef.current.handleSubmit()
    }
  }

  return (
    <Formik
      validateOnMount={true}
      innerRef={formRef}
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
      ...
    >
    // ...
  )
}

문제: formikProps에 의존하는 React 수명 주기 후크 사용

문맥상, 내가 직면한 문제는 사용자가 언제 특정 양식 필드를 채우고 다음 질문으로 넘어갔는지 확인하는 방법(애니메이션용)이었습니다. 내가 생각해낸 해결책은 useEffect 어레이가 업데이트될 때마다 내 요구 사항이 통과했는지 확인하기 위해 formikProps.values 후크를 활용하는 것이었습니다.

ES6 화살표 함수 구문을 사용하고 있었는데 이렇게 하려고 하면 오류가 발생했습니다.

<Formik
  ...
>
  {(formikProps) => {

    React.useEffect(() => {
      updateQuestionsState(formikProps);
    });

    return (
      <Form...

    )
  }}
</Formik>

오류를 수정하기 위해 이름이 지정된 함수로 화살표 함수를 제외했습니다.

<Formik
  ...
>
  {function FormWithUseEffect(formikProps) {

    React.useEffect(() => {
      updateQuestionsState(formikProps);
    });

    return (
      <Form ...

    )
  }}
</Formik>

이 게시물을 개선할 수 있는 방법에 대한 제안이 있으면 알려주십시오. 나는 https://bionicjulia.com에 있고 .