양식 제출 핸들러 내부에서 사용자 정의 후크 setState를 호출하면 상태가 업데이트되지 않습니다.

Question

오류 메시지가 표시되려면 양식의 필드에 집중해야 합니다. 아직 필드에 초점을 맞추지 않았을 때 "제출"을 클릭하면 오류 메시지가 나타나도록 하고 싶습니다.

다음은 후크입니다(나중에 setIsTouched 호출에 관한 것으로 의심됨):

으아아아

다음은 양식 처리기입니다(각 필드에 별칭을 사용했습니다):

으아아아

예를 들어 확인 이름 필드가 비어 있고 처음에 제출 버튼을 클릭합니다. 현재 const hasError = errorArray.length > 0 && isTouched; 배열에는 요소가 있지만 필드에 초점이 없기 때문에 isTouched는 false입니다.

그러면 "touchNameField(true);"가 들어옵니다. hasError를 true로 설정하려고 시도했지만 여전히 false로 표시됩니다.

setState 호출은 비동기식입니다. 이것이 문제입니까? 재설정 호출을 제거하면 작동합니다. 하지만 nameInputError 등이 왜 거짓인지 아직도 이해가 되지 않습니다.

Answer 1

실행하지 않으면 errorArray 和 hasError변화에 반응하지 않기 때문이라고 생각합니다. 따라서 해당 후크를 인스턴스화하는 위치에 따라 달라집니다. 테스트하지 않는다면 다음을 시도하겠습니다:

으아아아

다시 말하지만, 테스트되지 않았으므로 약간의 조정이 필요할 수 있습니다.