React 갈고리의 잘못된 갈고리 호출 경고 해결

최근 우리는 야외에 있는 로봇들이 우리가 원하는 것이 아니기 때문에 React-based query builder을 건설하기로 결정했다.대단합니다: 고기와 고기가 있는 프로젝트에서 명령을 내릴 기회가 있는 것을 누가 싫어하겠는가. 특히 우리가 그것을 개원 지역사회에 발표할 계획을 세웠을 때?!
이 프로젝트는 매우 잘 진행되고 심지어 매우 순조롭게 진행되었고,React 조회 생성기는 매우 빨리 조합되어 매우 잘 작동하였다.우리는 모든 것을 가지고 있다. 많은 문서가 있다. 우리는 Hooks(나에게 있어서 새로운 모험)를 사용했고 좋은 테스트를 거쳤다.
그러나 테스트 과정에서 나는 상당히 거친 갈고리에 뺨을 한 대 맞아서 익숙해질 수 있다고 경고했다.

Hooks can only be called inside the body of a function component.

문제는 갈고리의 모든 사용법이 여기서 호출된다는 것이다...히드록시 메틸 멜라민 디메틸 에테르

그렇다면 무엇이 잘못된 갈고리 호출 경고를 초래합니까?

만약 당신이 나처럼 모든 hooks 규칙을 따랐고, 당신이 구축하고 있는 도구가 로컬 예시/프레젠테이션 프로젝트에서 일하고 있다면, 이 경고는 상당히 큰 오도를 일으킬 수 있습니다.
오류 메시지가 약간 오도되었음에도 불구하고 이 경고는 React팀 really helpful official documentation을 가리키는 링크를 첨부합니다. 한 마디로 하면 이 링크는 이 문제가 실제로 세 가지 가능한 원인이 있음을 알려줍니다.

There are three common reasons you might be seeing it:

React 및 React DOM 버전이 일치하지 않을 수 있습니다.

갈고리의 규칙을 위반했을 수도 있습니다.

같은 응용 프로그램에 여러 개의 React 복사본이 있을 수 있습니다.

나는 틀림없이 두 번째나 세 번째 원인으로 반칙을 한 것이 아닐 것이다. 나는 내가 이미 첫 번째 원인을 찾았다고 생각하지만, 이것은 더욱 많은 발굴이 필요하다.
따라서 극도로 낙담할 때가 왔다.모니터가 창밖으로 던져져서 나는 개발 인생 전체를 의심하기 시작했다.

드디어 답을 찾았어요.

대량의 검색과 디버깅을 통해 문제는 React 또는 React DOM 문제의 중복 버전에 있는 것 같습니다.
사실 답은 위에서 유용한 React hooks 문서의 끝에 있습니다.확장된 GitHub discussion on the pesky invalid hook call warning error과 완전히 같은 곤경을 가진 많은 개발자들을 가리키는 링크가 있다.더 중요한 것은 상황에 따라 다양한 해결 방안이 있다는 것이다.
나의 특정 장면에 대해 나는 자신의 방법으로 조회 생성기를 구축했다.위 목록에 있는 "React의 여러 버전"no no no를 발견했고 Parcel's alias feature을 사용했으며 가방에 peerDependencies 설정 설정을 사용했는지 확인했습니다.json.

"peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },

그럼에도 불구하고 Parcel은 React와 React DOM을 생산 구축에 묶고 있습니다!
그럼, 우리는 이미 답을 찾았지만, 우리는 어떻게 이 문제를 해결하고 단지 하나의 버전의React를 확보합니까?

잘못된 갈고리 호출 경고를 복구하는 방법

일반 설정에서는 NPM과 같은 특정 관리 저장소로 의존 관계가 전송되고 npm install my-cool-widget 명령으로 처리되는 다른 항목에서 의존 관계가 사용됩니다.
이 그림은 전형적인 설정을 설명한다.

문제는 이러한 모든 예방 조치에도 불구하고 저희의'새로운 것들'소부품은 React를 최종 패키지**와 React를 포함하는 기존/소비 항목에 묶는 것입니다.
그래서 나도 모르게 갈고리의 첫 번째 법칙을 위반했다. 같은 프로젝트에 여러 버전의 React가 있을 수 없다는 것이다.
해결 방안은 무엇입니까?소포 사용을 멈추고 웹 패키지로 전환합니다. (걱정 마세요. 저도 great Webpack starter project, 그리고 미리 설정해야 할 초기 너트와 볼트가 있습니다.
(본문을 작성할 때, 나는 Parcel JS를 React와 함께 사용해서 NPM에 소비할 수 있는 의존항을 만들어서 나의 평론이 잘못된 부분이라는 것을 증명할 수 있는 방법이 있다고 믿지 않는다!)

Webpack을 사용하여 잘못된 갈고리 호출 경고 수정

여기에서 JS를 감싸는 특정한 문제에 부딪힐 수는 없지만, 어쨌든, 신비한 React 무효 연결 오류가 중복된 React 버전에서 발생한 것을 발견할 수 있습니다.그리고 웹 팩은 가장 유행하는 JS 귀속기라고 할 수 있기 때문에 귀여움의 의존항을 귀속시키고 포장하는 데 사용할 가능성이 높습니다.
React 버전의 잘못된 연결 오류를 반복하지 않기 위해 Webpack을 사용하려면 의존 항목 (즉 당신이 구축하고 있는 작은 위젯) 에서 해야 할 일이 있습니다.

React를 등가 종속성으로 설정

먼저 package.json 파일을 열고 React 버전을 등가 종속성으로 설정합니다.

"peerDependencies": {
   "react": ">=16.8.0",
   "react-dom": ">=16.8.0"
},

이것은 당신의 문제를 해결할 수 없지만, 소비 항목이 의존항으로 React (또는 여기에 설치한 다른 내용) 를 설치했는지 확인할 필요가 있습니다.

다른 버전의 React를 참조하도록 패키지 구성

이제 해결 방안의 실질을 살펴보자. 우리는 웹 팩을 기본적으로 React를 생산 패키지의 일부분으로 무시하고 프로젝트에서 인용해야 한다. 프로젝트에서 이 코드들은 최종적으로 소비될 것이다.
이렇게 하려면 다음과 같이 Webpack의 externals 속성을 운영 설정에 추가해야 합니다.

externals: {
   react: 'commonjs react',
  'react-dom': 'commonjs react-dom',
},

마지막으로 우리는 웹 팩이 제품 구축에서 출력하는 모듈 시스템의 유형을 조정할 것이다.이를 위해 우리는 libraryTarget 속성을 웹 설정의 output 설정에 다음과 같이 추가합니다.

output: {
   ...// other settings here
   libraryTarget: 'commonjs2'
},

아, 다 좋아요. 결말이 좋아요.

그러니까 니가 맞을 거야.주의해야 할 것은 사용할 수 있는 React가 없으면 소비 항목에서 여러 가지 새로운 오류가 발생하지만, React가 설치되면, 의존 항목은 React를 찾아서 가져오려고 시도합니다. (commonjs require() 문법 사용) 모든 것이 좋아질 것입니다.

유용한 링크

다음은 이 문서에 사용된 유용한 링크의 빠른 요약입니다.

Official React hooks error documentation

The React Query Builder on GitHub

The hooks error discussion on GitHub

My Webpack starter project

My Parcel JS starter project with React