찾다

 >  Q&A  >  본문

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

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

으아악

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

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

으아악

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

P粉477369269P粉477369269241일 전562

모든 응답(2)나는 대답할 것이다

  • P粉729198207

    P粉7291982072024-03-26 10:59:40

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

    으아악

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

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

    으아악

    회신하다
    0
  • P粉448346289

    P粉4483462892024-03-26 10:39:49

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

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

    React 문서에서:

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

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

    회신하다
    0
  • 취소회신하다