조건부 후크를 사용하지 않고 구성 요소에서 이전 렌더링 오류보다 더 많은 렌더링

Question

파일 업로드를 위해 클릭 가능한 링크를 렌더링하는 다음 구성 요소가 있습니다

으아아아

이 구성 요소를 사용하여 파일을 업로드할 때마다 반응 오류가 발생합니다渲染的钩子比上次渲染期间更多。. React는 Hook의 순서가 다음과 같이 변경되었음을 나타냅니다

으아아아

내 코드를 보면 왜 이런 오류가 발생하는지 이해할 수 없습니다. React는 오류를 일으키는 useState를 호출하는 구성 요소의 첫 번째 줄이라고 말하지만 제게는 말이 되지 않습니다. 조건 없이 반응 후크를 호출하면 이 문제가 발생하며 이 오류를 발생시키는 구성 요소의 첫 번째 줄은 후크가 변경되는 순서와 일치하지 않습니다.

저는 React 18.2.0, TypeScript 4.9.5를 사용하고 있습니다

Answer 1

문제는 컴포넌트가 호출되는 방식에 있는 것으로 밝혀졌습니다. 상위 구성 요소 렌더링 FileUploadLink은 다음과 같습니다

으아악

수정 사항은 구성 요소를 태그로 래핑하는 것입니다. 즉,

으아악