오류 메시지가 표시되려면 양식의 필드에 집중해야 합니다. 아직 필드에 초점을 맞추지 않았을 때 "제출"을 클릭하면 오류 메시지가 나타나도록 하고 싶습니다.
다음은 후크입니다(나중에 setIsTouched 호출에 관한 것으로 의심됨):
으아아아다음은 양식 처리기입니다(각 필드에 별칭을 사용했습니다):
으아아아 예를 들어 확인 이름 필드가 비어 있고 처음에 제출 버튼을 클릭합니다.
현재 const hasError = errorArray.length > 0 && isTouched; 배열에는 요소가 있지만 필드에 초점이 없기 때문에 isTouched는 false입니다.
그러면 "touchNameField(true);"가 들어옵니다. hasError를 true로 설정하려고 시도했지만 여전히 false로 표시됩니다.
setState 호출은 비동기식입니다. 이것이 문제입니까? 재설정 호출을 제거하면 작동합니다. 하지만 nameInputError 등이 왜 거짓인지 아직도 이해가 되지 않습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
실행하지 않으면
으아아아errorArray和hasError변화에 반응하지 않기 때문이라고 생각합니다. 따라서 해당 후크를 인스턴스화하는 위치에 따라 달라집니다. 테스트하지 않는다면 다음을 시도하겠습니다:다시 말하지만, 테스트되지 않았으므로 약간의 조정이 필요할 수 있습니다.