formik을 사용하는 경우 중첩된 개체에 올바른 값을 어떻게 쓸 수 있나요?
P粉410239819
P粉410239819 2023-08-17 16:26:31
0
1
544
<p>양식 개체의 필드 이름과 일치하는 필드 배열이 주어졌을 때 중첩 값을 쓰려고 하는데 어떤 이유로 formik이 중첩 값을 쓰는 방법을 모르기 때문에 이는 최상위에만 작동합니다. 레벨 1</p> <p>댓글에 코드샌드박스 링크를 남겨두겠습니다</p> <pre class="brush:php;toolbar:false;">기본 함수 내보내기 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)}</> }</pre>
P粉410239819
P粉410239819

모든 응답(1)
P粉046878197

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

으아악

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

으아악

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

으아악

codesandbox

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿