다음과 같은 구성요소가 있습니다(매우 단순화된 버전):
으아악이 구성 요소를 사용하는 페이지를 로드하면 다음 오류가 발생합니다. Uncaught Invariant Violation: Rendered more hooks than during the previous render.
이 오류에 대한 설명을 찾으려고 했지만 검색 결과가 없습니다.
컴포넌트를 약간 수정했을 때:
으아악더 이상 해당 오류가 발생하지 않습니다. 제가 renderResults
返回的 jsx 中包含了 setState
기능을 하고 있어서 그런 걸까요? 이 수정 사항이 작동하는 이유에 대한 설명이 있으면 좋을 것입니다.
P粉7291982072024-03-26 10:59:40
저도 같은 문제에 직면했습니다. 내가 하고 있는 일은 다음과 같습니다:
으아악첫 번째 렌더링에서 구성 요소가 일찍 반환되고 useEffect가 실행되지 않는 것 같아요. isLoading 상태가 변경되고 useEffect가 실행되면 오류가 발생합니다. 후크가 이전보다 더 많이 렌더링됩니다.
간단한 변경으로 문제가 해결되었습니다.
으아악P粉4483462892024-03-26 10:39:49
첫 번째 코드 예제(문제가 되는 코드)가 onClick
内的函数,而第二个代码示例(有效的代码示例)则将函数传递给了 onClick
를 호출하기 때문에 수정 사항이 작동합니다. 차이점은 JavaScript에서 "이 코드 호출"을 의미하는 매우 중요한 괄호입니다.
이렇게 생각해 보세요. 첫 번째 코드 예제에서는 클릭을 기다리는 대신 매번 component
时,都会调用 renderResults
。每次发生这种情况时,都会调用 setAllResultsVisible(!allResultsVisible)
를 렌더링합니다. React는 자체 일정에 따라 렌더링을 수행하기 때문에 이것이 몇 번이나 발생할지 결정할 방법이 없습니다.
React 문서에서:
참고: 샌드박스에서 첫 번째 코드 예제를 실행할 때 정확한 오류 메시지를 얻을 수 없습니다. 내 오류에는 무한 루프가 포함되어 있습니다. 최신 버전의 React에서 설명된 오류가 발생할까요?