formik을 사용하는 경우 중첩된 개체에 올바른 값을 어떻게 쓸 수 있나요?

Question

양식 개체의 필드 이름과 일치하는 필드 배열이 주어졌을 때 중첩 값을 쓰려고 하는데 어떤 이유로 formik이 중첩 값을 쓰는 방법을 모르기 때문에 이는 최상위에만 작동합니다. 레벨 1

댓글에 코드샌드박스 링크를 남겨두겠습니다

기본 함수 내보내기 App() {
  const 형식 = useFormik({
    초기값: {
      이름: "",
      로그인: "",
      에 대한: {
        나이: "",
        순위: "",
        자동차: {
          이름: "",
          연도: ""
        }
      }
    }
  });

  const 필드 = [
    {
      이름: { 제목: "귀하의 이름", 필드: {} },
      로그인: { 제목: "귀하의 로그인", 필드: {} },
      에 대한: {
        제목: "정보",
        필드: {
          나이: { 제목: "나이", 필드: {} },
          순위: { 제목: "귀하의 순위", 필드: {} },
          자동차: {
            title: "당신의 차",
            필드: {
              이름: { 제목: "자동차 이름", 필드: {} },
              연도: { 제목: "자동차 연도", 필드: {} }
            }
          }
        }
      }
    }
  ];
  const { 값, handlerChange } = 양식;

  console.log("VALUES", 값);

  const itemsRender = (항목, idx) =>
    const key = Object.keys(item).at(-1);
    반품 (
      <div 키={idx}>
        <p>{item[key]?.title}</p>
        <입력
          이름={키}
          값={값[키]}
          onChange={handleChange}
          자리 표시자={item[key].title}
        />

        {!isEmpty(item[key]?.fields) &&
          <div style={{ marginLeft: 20 }}>
            {Object.entries(item[key]?.fields).map(itemsRender)}
          </div>
        )}
      </div>
    );
  };

  return <>{fields.map(itemsRender)}</>
}

Answer 1

중첩 필드에 대한 전체 경로를 포함하려면 name和value 속성을 업데이트해야 합니다.

으아악

귀하의 코드는 한 수준의 중첩만 처리합니다.
더 깊은 중첩을 위해서는 중첩된 필드를 재귀적으로 렌더링하고 처리해야 합니다

으아악

마지막으로, 중첩 필드의 값을 업데이트하기 위해 handleChange处理嵌套字段，而应该使用Formik的setFieldValue를 직접 사용하지 마세요.
양식 개체에서 setFieldValue에 액세스할 수 있습니다.

으아악

codesandbox