리랜더링 이후 input값이 화면에 출력되지만 최초 폼 submit 시 데이터가 없다고 출력되는 원인

Question

+버튼을 클릭하면 새로운 form이 생기면서 시간 input의 default 값으로 현재시간이 들어갑니다새로 생긴 폼에서 바로 서브밋을 하면 폼 검증에서 default 값으로 현재시간이 있는 input에 데이터에 시간을 입력해달라는폼 검증 에러가 출력됩니다. 다시 한번 더 서브밋하면 데이터가 정상적으로 전송이 됩니다.버튼을 클릭하면 호출되는 함수는 매개변수로 클릭한 버튼의 위치인 index값을 받으며기존 list 상태값에 매개변수 index 다음으로 새로운 data객체를 넣어 새로운 배열로 업데이트 함수 입니다.제가 생각하는 로직으로는+버튼 클릭 ( list:[{...},{...},{...}]3개 )form추가 함수 호출( 새로운 데이터 추가 및 setList 실행) 리랜더링 진행list:[{..},{...},{...}, {....}] 4개이러한 순서로 최신 데이터로 업데이트되있으니 화면에 현재값이 출력이 되는것일텐데막상 처음 submit 시에는 값이 없다고 하여 에러를 출력하지만 다시 한번 더 submit하면 그땐 정상적으로 넘어가집니다.제가 놓치고 있거나 잘못 알고 있는 부분이 있을까요?선배님들의 가르침 부탁드립니다.라이브러리는 react-hook-form을 사용하고 있습니다.main.jsx const [list, setList] = useState(data.result);//loader를 통해 초기데이터 설정 const handlerAddTr = (e, index, schedule) => { e.preventDefault(); const newItem = { NO: schedule.NO, //클릭한 데이터의 기본키값으로 새로운 데이터의 기본키값으로 설정 DAY: "", YOIL: "", HOLYDAY_YN: "", HOLYDAY: "", TIME: timeString,//현재시간 TYPE: 1, GOV_NAME: "", GOV_DEPT: "", RQU_CONTENT: "", RQU_NAME: "", RQU_TEL: "", SERVER: "", WEB: "", VISIT_ETC: "", RESULT: 1, WORK_NAME: "", HOLY_NAME: "", METTING: "", ETC: "", COPY: true, }; const newItems = [...list]; newItems.splice(index + 1, 0, newItem); setList(newItems); }; return (

{list.length !== 0 ? ( list.map((day, index) => ( )) ) : ( 등록된 날짜가 없습니다. )}

); list.jsx const List = ({ Key, day, index, handlerAddTr, }) => { const { handleSubmit, formState: { errors }, register, } = useForm(); const callSubmit = (e) => { if (e.keyCode === 13) { handleSubmit(onSubmit)(); } }; return (

프로폴리스 · Answer

timeString 값을 가져오는 부분이 비동기인가요?

리랜더링 이후 input값이 화면에 출력되지만 최초 폼 submit 시 데이터가 없다고 출력되는 원인

1개의 답변

#react-hook-form 목록