포착되지 않은 불변 위반: 이전 렌더링보다 더 많은 후크로 렌더링되었습니다.

Question

다음과 같은 구성요소가 있습니다(매우 단순화된 버전):

으아악

이 구성 요소를 사용하는 페이지를 로드하면 다음 오류가 발생합니다. Uncaught Invariant Violation: Rendered more hooks than during the previous render. 이 오류에 대한 설명을 찾으려고 했지만 검색 결과가 없습니다.

컴포넌트를 약간 수정했을 때:

으아악

더 이상 해당 오류가 발생하지 않습니다. 제가 renderResults 返回的 jsx 中包含了 setState 기능을 하고 있어서 그런 걸까요? 이 수정 사항이 작동하는 이유에 대한 설명이 있으면 좋을 것입니다.

Answer 1

저도 같은 문제에 직면했습니다. 내가 하고 있는 일은 다음과 같습니다:

으아악

첫 번째 렌더링에서 구성 요소가 일찍 반환되고 useEffect가 실행되지 않는 것 같아요. isLoading 상태가 변경되고 useEffect가 실행되면 오류가 발생합니다. 후크가 이전보다 더 많이 렌더링됩니다.

간단한 변경으로 문제가 해결되었습니다.

으아악

Answer 2

첫 번째 코드 예제(문제가 되는 코드)가 onClick 内的函数，而第二个代码示例（有效的代码示例）则将函数传递给了 onClick를 호출하기 때문에 수정 사항이 작동합니다. 차이점은 JavaScript에서 "이 코드 호출"을 의미하는 매우 중요한 괄호입니다.

이렇게 생각해 보세요. 첫 번째 코드 예제에서는 클릭을 기다리는 대신 매번 component 时，都会调用 renderResults。每次发生这种情况时，都会调用 setAllResultsVisible(!allResultsVisible)를 렌더링합니다. React는 자체 일정에 따라 렌더링을 수행하기 때문에 이것이 몇 번이나 발생할지 결정할 방법이 없습니다.

React 문서에서:

React는 이벤트 문서를 처리합니다

참고: 샌드박스에서 첫 번째 코드 예제를 실행할 때 정확한 오류 메시지를 얻을 수 없습니다. 내 오류에는 무한 루프가 포함되어 있습니다. 최신 버전의 React에서 설명된 오류가 발생할까요?