React: 잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다. 다음 이유 중 하나로 인해 발생할 수 있습니다.

에 만든 2019년 04월 04일 · 61코멘트 · 출처: facebook/react

안녕하세요, 저는 반응하는 것이 처음이고 구성 요소의 반응 라이브러리를 만들려고하는데 내가 만들고있는 구성 요소 중 하나가 REACT HOOKS 를 사용하기 때문에이 문제가 발생했습니다.

면책 조항: 문제를 만드는 것은 이번이 처음이므로 양해해 주십시오.

그래서 accordion__item--open 및 accordion__item 클래스 사이를 토글하여 열고 닫는 아코디언 구성 요소를 만들려고 합니다.

패키지.json

{
  "name": "react-lib",
  "version": "0.3.0",
  "description": "A simple UI library of react components",
  "main": "dist/index.js",
  "publishConfig": {
    "registry": ""
  },
  "scripts": {
    "login": "",
    "build": "webpack --mode=production",
    "develop": "webpack --mode=development --watch"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "",
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "eslint": "^5.15.1",
    "eslint-loader": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.6.0"
  }
}

웹팩.config.js

const path = require('path');
const webpack = require('webpack');

module.exports =  {

  mode: 'development',
  optimization: {
    minimize: true,
  },
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js',
    library: '',
    libraryTarget: 'commonjs'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/react']
        }
      }
    ]
  } 
};

이것은 아코디언 컨테이너입니다.

```
'반응'에서 React 가져오기;

기능 아코디언({자식 }) {

반품 (

{ 어린이들 }

);

}

기본 아코디언 내보내기;

**This is the accordion item that will live inside the container:**

'반응'에서 React, { useState } 가져오기;

기능 AccordionItem({헤더, 콘텐츠}) {

const [ isActive, toggleActive ] = useState(거짓);

반품 (

accordion__item ${ isActive ? 'accordion__item--open' : '' } }>

  <button
    className="accordion__item-header"
    onClick={ () => isActive ? toggleActive(false) : toggleActive(true) }
  >
   { header }
   <svg className="icon icon--debit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
     <path className="icon__path" d="M22.37,22.33V2.67a2.63,2.63,0,0,1,5.26,0V47.24a2.63,2.63,0,0,1-5.26.09V27.58H2.71a2.63,2.63,0,0,1,0-5.25Zm11.92,5.25a2.63,2.63,0,0,1,0-5.25h13a2.63,2.63,0,0,1,0,5.25Z">
     </path>
   </svg>
 </button>

 <div className="accordion__item-content">
   { children }
 </div>

)

};

기본 AccordionItem 내보내기;

Now inside of a [create-react-app](https://github.com/sethandleah/myapp) I import these components

My [library](https://github.com/sethandleah/react-lib) and the [create-react-app](https://github.com/sethandleah/myapp) are relative to each other and I am using ```npm link```

'반응'에서 React 가져오기;

'react-lib'에서 {AccordionItem} 가져오기
'react-lib'에서 {Accordion} 가져오기;

함수 앱({props}) {

반품 (

  <Accordion>
    <AccordionItem header={"Hello"} content={"World"}/>
  </Accordion>

)

}

기본 앱 내보내기;

I have followed all of these [instructions](https://reactjs.org/warnings/invalid-hook-call-warning.html) and I still get the same error.


**Current behavior?**

잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다. 다음 이유 중 하나로 인해 발생할 수 있습니다.

React와 렌더러(예: React DOM)의 버전이 일치하지 않을 수 있습니다.
Hooks의 규칙을 위반할 수 있습니다.
동일한 앱에 두 개 이상의 React 사본이 있을 수 있습니다.
이 문제를 디버그하고 수정하는 방법에 대한 팁은 https://fb.me/react-invalid-hook-call 을 참조

**Steps to reproduce**

- clone [https://github.com/sethandleah/react-lib](https://github.com/sethandleah/react-lib)
- clone [https://github.com/sethandleah/myapp](https://github.com/sethandleah/myapp)
- ```cd react-lib```
- ```npm install```
- ```npm link```
- ```cd ../myapp```
- ```npm i```
- ```npm link react-lib```
- ```npm start```

**Expected behavior**

- It should show a button with a "plus" svg sign and the words "Hello" and "World" respectively
- Open devtools and go to elements
- When clicking on the button the class ```accordion_item--open``` should toggle

**To see the above, do the following:**

- Uncomment these lines at ```myapp/src/App.js```

'./Accordion'에서 아코디언 가져오기;
'./AccordionItem'에서 AccordionItem 가져오기;

- The comment out these line, alse at ```myapp/src/App.js```:

'react-lib'에서 { 아코디언 } 가져오기;
'react-lib'에서 { AccordionItem } 가져오기;
```

React, Browser/OS 버전은 이 문제의 영향을 받습니다.

React 및 React-Dom: 둘 다 react-lib 및 myapp 모두에서 ^16.8.6 입니다.
브라우저: Brave Version 0.61.52 Chromium: 73.0.3683.86 (Official Build) (64-bit)
OS: MacOS 하이 시에라 Version 10.13.6 (17G5019)

Needs Investigation

출처

sethandleah

👍56 ❤2

가장 유용한 댓글

내 라이브러리와 create-react-app은 서로 상대적이며 npm 링크를 사용하고 있습니다.

이 부분을 읽었습니까?

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate - 반응

link 워크플로를 직접 처리합니다.

Screen Shot 2019-04-04 at 09 28 47

gaearon 에 2019년 04월 04일

👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

모든 61 댓글

https://github.com/facebook/react/issues/13991 의 사람들과 동일한 문제에 직면하고 있다고 생각합니다. 문제의 맨 아래에 제공된 해결 방법 중 일부를 살펴보고 문제를 확인할 수 있습니다. 당신을 위해 일?

threepointone 에 2019년 04월 04일

👍1

이것은 HOC 내부에서 후크를 사용하는 경우 발생합니다.

const HOC = Component => {
  return (props) => {
    const [val] = useState();
    return <div>{val}</div>
  }
}

revskill10 에 2019년 04월 04일

👍62 ❤4 🎉1

@revskill10 코드샌드 박스 재현으로 별도의 이슈를 만들어주세요.

threepointone 에 2019년 04월 04일

https://www.npmjs.com/package/webpack-bundle-analyzer 를 사용하는 것이 좋습니다

두 개의 반응 빌드를 추가하고 이 문제를 일으키는 라이브러리의 경우 반응 및 반응 영역을 상위 응용 프로그램에 연결하는 것을 종종 잊었습니다.

이 경우 npm은 react 및 react-dom을 react 및 react-dom의 상위 버전에 연결합니다.

iAmServerless 에 2019년 04월 04일

내 라이브러리와 create-react-app은 서로 상대적이며 npm 링크를 사용하고 있습니다.

이 부분을 읽었습니까?

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate - 반응

link 워크플로를 직접 처리합니다.

Screen Shot 2019-04-04 at 09 28 47

gaearon 에 2019년 04월 04일

👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

(이 방법이 도움이 되지 않으면 알려주시면 다시 열 수 있습니다. 자세히 적어주셔서 감사합니다.)

gaearon 에 2019년 04월 04일

수고해주신 모든 분들 감사합니다

@gaearon 나는 이미 React 페이지의 권장 사항에 따라 이것을 해결하려고 시도하고 재시도했습니다.

이 모든 지침 을 따랐지만 여전히 같은 오류가 발생합니다.

@threepointone 충분히 웃기고 많은 사람들이 #13991 에서 이에 대한 해결책을

sethandleah 에 2019년 04월 05일

알겠습니다. 도움이 되지 않으면 누군가 문제를 디버깅하고 도움을 줄 수 있도록 열어 둡니다. 문제는 _is_ 동일하지만(패키지를 링크하는 방식으로 인해 패키지가 번들에 복제됨) 제안이 효과가 없는 이유가 확실하지 않습니다.

gaearon 에 2019년 04월 05일

@gaearon 이제 닫을 수 있습니다. 위의 솔루션이 작동했습니다.

sethandleah 에 2019년 04월 07일

저는 아주 기본적인 방식으로 hook을 호출합니다.

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

function App() {
const [number, setNumber] = useState(0);
const increase = () => {
    setNumber(number+1);
}
return <div>
<span>Counting: {number}</span>
<button onClick={increase} >Increase</button>
</div>
}

const selector = document.getElementById('app');

ReactDOM.render(<App />, selector);

나는 오류를 얻는다
Hooks can only be called inside of the body of a function component.
스케치에서 반응 프로젝트를 많이 생성했지만 이전에는 이 오류가 발생하지 않았습니다.
후크의 모든 규칙을 이해합니다.
디버깅하고 해결하기 위해 12시간 동안 시간을 할애하지만 불행히도 그럴 수 없습니다. 지금은 잘 모르겠습니다.

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // I get true

worapolburaphan 에 2019년 05월 08일

👍20 ❤1

@xeastcrast 문제를 해결할 수 있었습니까?

carlosriveros 에 2019년 05월 29일

@carlosriveros
사례 1:
하나의 스크립트 태그 번들만 있는 index.html을 확인할 수 있습니다.

index.html을 확인한 후에도 동일한 오류가 발생하는 경우
사례 2:
Webpack html을 사용하는 경우 webpack.config 파일 내의 플러그인 속성
그리고 new HTMLWebpackPlugin()의 옵션에 {reject: true}가 없습니다.

index.html에서 번들로 src하는 스크립트 태그를 제거해야 합니다.

HTMLWebpackPlugin은 번들 파일을 자동으로 포함하는 스크립트 태그를 추가하기 때문입니다.

worapolburaphan 에 2019년 05월 30일

👍13 ❤6 🎉6 🚀4 😄4

안녕하세요, 저는 React Hooks를 처음 접했습니다. 방금 내 프로젝트에서 검색 표시줄을 만들기 위해 Material-UI를 사용했습니다. 이 코드를 작성했지만 작동하지 않고 동일한 문제가 발생합니다. 나는 React Hooks 문서를 읽었지만 이것에 관해 아무것도 얻지 못했습니다.
REACTJS 코드
```'react'에서 React 가져오기;
'@material-ui/core/styles'에서 { makeStyles } 가져오기;
'@material-ui/core/Paper'에서 종이 가져오기;
'@material-ui/core/InputBase'에서 InputBase 가져오기;
'@material-ui/core/IconButton'에서 IconButton 가져오기;
'@material-ui/icons/Search'에서 SearchIcon 가져오기;

const useStyles = makeStyles({
루트: {
패딩: '2px 4px',
디스플레이: '플렉스',
alignItems: '중앙',
너비: 400,
},
입력: {
여백왼쪽: 8,
플렉스: 1,
},
아이콘 버튼: {
패딩: 10,
},
구분선: {
너비: 1,
키: 28,
여백: 4,
},
});

기능 기능() {
const 클래스 = useStyles();

반품 (

);
}

기본 기능 내보내기;

**PACKAGE.JSON**
```{
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

버전

노드 -- v10.15.3
반응 -- ^16.8.5
재료-UI -- ^4.0.1

예상 결과

내장 VS CODE 및 예상 _검색창_
산출
_TypeError: Object(...)는 함수가 아닙니다_
_잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다. 다음 이유 중 하나로 인해 발생할 수 있습니다._

노력하다
_CODESANDBOX에서 실행해 보십시오 . 모든 것이 잘 실행됩니다_ 확인하십시오 .

B4BIPIN 에 2019년 06월 02일

👍3

안녕하세요, 저는 React Hooks를 처음 접했습니다. 방금 내 프로젝트에서 검색 표시줄을 만들기 위해 Material-UI를 사용했습니다. 이 코드를 작성했지만 작동하지 않고 동일한 문제가 발생합니다. 나는 React Hooks 문서를 읽었지만 이것에 관해 아무것도 얻지 못했습니다.
REACTJS 코드
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';

const useStyles = makeStyles({
  root: {
    padding: '2px 4px',
    display: 'flex',
    alignItems: 'center',
    width: 400,
  },
  input: {
    marginLeft: 8,
    flex: 1,
  },
  iconButton: {
    padding: 10,
  },
  divider: {
    width: 1,
    height: 28,
    margin: 4,
  },
});

function Feature() {
    const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <InputBase className={classes.input} placeholder="Search Google Maps" />
      <IconButton className={classes.iconButton} aria-label="Search">
        <SearchIcon />
      </IconButton>
    </Paper>
  );
}

export default Feature;
패키지.JSON
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
버전
노드 -- v10.15.3
반응 -- ^16.8.5
재료-UI -- ^4.0.1
예상 결과
내장 VS CODE 및 예상 _검색창_
산출
_TypeError: Object(...)는 함수가 아닙니다_
_잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다. 다음 이유 중 하나로 인해 발생할 수 있습니다._
노력하다
_CODESANDBOX에서 실행해 보십시오 . 모든 것이 잘 실행됩니다_ 확인하십시오 .

나는 또한 material-ui를 사용할 때 이 질문을 만난다.

stupidsongshu 에 2019년 06월 03일

@stupidsongshu , 그래서 어떻게 해결하셨나요?

B4BIPIN 에 2019년 06월 07일

안녕하세요, 저는 React Hooks를 처음 접했습니다. 방금 내 프로젝트에서 검색 표시줄을 만들기 위해 Material-UI를 사용했습니다. 이 코드를 작성했지만 작동하지 않고 동일한 문제가 발생합니다. 나는 React Hooks 문서를 읽었지만 이것에 관해 아무것도 얻지 못했습니다.
REACTJS 코드
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';

const useStyles = makeStyles({
  root: {
    padding: '2px 4px',
    display: 'flex',
    alignItems: 'center',
    width: 400,
  },
  input: {
    marginLeft: 8,
    flex: 1,
  },
  iconButton: {
    padding: 10,
  },
  divider: {
    width: 1,
    height: 28,
    margin: 4,
  },
});

function Feature() {
    const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <InputBase className={classes.input} placeholder="Search Google Maps" />
      <IconButton className={classes.iconButton} aria-label="Search">
        <SearchIcon />
      </IconButton>
    </Paper>
  );
}

export default Feature;
패키지.JSON
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
버전
노드 -- v10.15.3
반응 -- ^16.8.5
재료-UI -- ^4.0.1
예상 결과
내장 VS CODE 및 예상 _검색창_
산출
_TypeError: Object(...)는 함수가 아닙니다_
_잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다. 다음 이유 중 하나로 인해 발생할 수 있습니다._
노력하다
_CODESANDBOX에서 실행해 보십시오 . 모든 것이 잘 실행됩니다_ 확인하십시오 .

이것은 오늘 나에게 일어났고 npm install --save react-dom@latest를 실행합니다.

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate - 반응

vcibel 에 2019년 06월 07일

❤1

도움말 페이지에 제공된 지침을 따랐지만 여전히 문제가 해결되지 않았습니다.

miguelmota 에 2019년 06월 12일

👍2

나를 위해, 우리는 단순히 React를 소품으로 전달하여 그것을 해결했습니다. 이것은 우리가 완전히 제어할 수 있는 앱이자 별도의 모듈이므로 모든 사람에게 적용되는지 모르겠습니다.

mikeaustin 에 2019년 06월 22일

저에게도 도움이 되지 않았습니다..
React 및 React-DOM = 16.8.0 및 Material-UI = 4.1.3 사용

Barathwaja 에 2019년 06월 26일

나는 이 후크 문제에 대한 모든 솔루션을 테스트하고 있습니다. 후크를 사용하여 외부 라이브러리에서 구성 요소를 가져오면 2개의 반응 인스턴스(lib에서 하나, 내 앱에서 하나)가 있으므로 충돌이 발생합니다.

나는 모든 제안을 따랐지만 지금까지 아무 것도 작동하지 않았습니다. 나는 그것이 더 명확해질 때까지 상태로 구성 요소를 만들 것입니다 ...

tquiroga 에 2019년 07월 03일

😕4

여기에 같은 문제가 있습니다. 두 개의 반응 인스턴스가 있는 프로젝트가 있습니다. 하나는 lib 이고 하나는 app 를 소비하는 lib 입니다.

dude-awesome 에 2019년 07월 10일

yarn.lock , package-lock.json , node_modules , dist , 캐시 및 빌드 파일의 종류를 제거한 다음 yarn 또는 npm install 를 실행하여 해결합니다 npm install 입니다. 이제 작동합니다!

gtgalone 에 2019년 07월 10일

👍3

나는 이것을 변화로 해결한다

                <Route key={index} render={route.component} path={route.path} />

에게

                <Route key={index} component={route.component} path={route.path} />

하지만 나는 왜 그런지 모르겠다 :(

xyj404 에 2019년 07월 12일

👍24 🎉10 ❤7

실수로 렌더링하는 대신 구성 요소를 사용하여 수정했습니다. 공식 가이드는 이 시나리오를 언급하지 않았습니다.
감사합니다, xyj404
<Route path="/login" exact component={LoginForm} />

MikeQin 에 2019년 07월 30일

👍10

나는 같은 문제가 있었지만 원인이 달랐습니다. 자동 가져오기 플러그인 또는 스니펫을 사용하는 모든 사용자의 경우 동일한 대소문자 반응에서 가져와야 합니다.

import {useEffect} from 'react' 와 import {useEffect} from 'React' 가 혼합되어 있으면 이 문제가 발생합니다.

raza-jamil-harvest 에 2019년 08월 16일

🎉1 👍1

나는 또한이 문제가 있지만 스토리 북에서 모든 것이 잘 작동하지만 응용 프로그램에서 사용할 때 동일한 오류가 발생합니다.

AnimeManna 에 2019년 08월 16일

같은 문제도 작동합니다
스토리북에서는 괜찮지만 앱을 사용하면 이 오류가 발생합니다.

hugo-integrate 에 2019년 08월 16일

npm test 실행해도 동일한 오류가 발생하지만 앱은 제대로 작동합니다.
여기 내 package.json , 제안 사항이 있습니까? 나는 정말로 붙어 있고이 오류를 처리하는 데 시간을 낭비하고 있습니다.

{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/moment": "1.0.1",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.1",
    "animate.css": "^3.7.0",
    "aws-amplify": "^0.4.8",
    "aws-amplify-react": "^0.1.54",
    "axios": "^0.18.0",
    "file-saver": "^2.0.0",
    "ics-js": "^0.10.2",
    "material-ui-pickers": "2.1.1",
    "moment": "^2.23.0",
    "normalize.css": "^8.0.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.0",
    "react-date-range": "^1.0.0-beta",
    "react-dom": "^16.8.6",
    "react-google-maps": "^9.4.5",
    "react-jss": "^8.6.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1",
    "recharts": "^1.3.5",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0",
    "sweetalert2": "^7.33.1",
    "sweetalert2-react-content": "^1.0.1"
  },
  "scripts": {
    "start:dev": "node  -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/development.env",
    "start:stage": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/stage.env",
    "start:prod": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/production.env",
    "build:stage": "node --max_old_space_size=2048 --max_old_space_size=1024 -r dotenv/config ./node_modules/.bin/react-scripts build dotenv_config_path=./env/stage.env",
    "build:dev": "node --max_old_space_size=2048 -r dotenv/config ./node_modules/react-scripts/bin/react-scripts build dotenv_config_path=./env/development.env",
    "build:prod": "node --max_old_space_size=2048 -r dotenv/config ./node_modules/react-scripts/bin/react-scripts build dotenv_config_path=./env/production.env",
    "test": "node -r dotenv/config ./node_modules/.bin/react-scripts test dotenv_config_path=./env/development.env --runInBand",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.0.0",
    "@testing-library/react": "^8.0.5",
    "@testing-library/react-hooks": "^1.1.0",
    "dotenv": "^6.0.0",
    "prettier": "^1.15.3",
    "react-test-renderer": "^16.8.6"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

simonepizzamiglio 에 2019년 08월 20일

npm 링크를 사용하여 연결된 별도의 앱에서 makeStyles from @material-ui/core makeStyles 후크를 사용하여 react 및 react-dom 둘 다 v16.8.6을 사용하여 이 상황에 직면했습니다.

메인 앱을 react 및 react-dom v16.9.0으로 업그레이드하고 문제를 일으키는 후크를 사용하던 앱을 다시 연결하면 모든 것이 다시 작동하기 시작했습니다.

pmjonesg 에 2019년 08월 22일

예, @material-ui를 사용할 때도 동일한 문제가 발생했습니다. 이 문제를 파악하는 데 더 많은 시간이 걸립니다. 그런 다음 Google을 검색하여 이에 대한 해결책을 찾았습니다. 여기에 있습니다 http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-function-component/

원본 게시물:

React 내에서 Material UI 코드를 작성하고 TypeScript(정확하게는 .tsx 파일 내)를 사용하는 몇 가지 예를 살펴보면 런타임에 "잘못된 후크 호출"과 같은 오류가 발생할 수 있습니다. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다."

다음은 이 오류를 일으키는 코드의 예입니다.

import React, { Component }  from "react";
import AddIcon from "@material-ui/icons/Add";
import { Fab } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
   fab: {
      margin: theme.spacing(1),
   },
}));

const classes = useStyles();

export default class SampleComponent extends Component<{}, {}> {
   public render() {
      return (
         <div>
            <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab>
         </div>
       );
   }
}

우리가 해야 할 일은 useStyles 코드를 함수로 감싸고 그것을 사용하는 코드를 바꾸는 것입니다. 예를 들어

const SampleFab = () => {
   const classes = useStyles();
   return <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab>;
}

export default class SampleComponent extends Component<{}, {}> {
   public render() {
      return (
         <div>
            <SampleFab />
         </div>
      );
   }
}

이것은 또한 간단한 함수에서 재사용 가능한 구성 요소를 만드는 방법을 보여줍니다.

=> 이상하지만 잘 작동합니다. 이것이 도움이 되기를 바랍니다.

bachphuc 에 2019년 08월 23일

👍3

lerna 또는 저와 같은 monorepo를 사용하는 경우 Webpack 해결 구성에 이와 같은 sth를 추가하십시오.

...
    alias: {
      'react-dom': 'path/to/main-package/node_modules/react-dom',
      react: 'path/to/main-package/form/node_modules/react',
    }
...

Storybook에서 가져오는 경우 사용자 지정 Webpack 구성에도 추가하십시오.

참고로, 이 방법으로 문제가 해결되면 웹팩 빌드 번들에도 2가지 버전의 반응이 있습니다(웹팩 번들 분석기와 같은 sth를 사용하여 검사). 제 경우에는 번들링과 모든 도구를 처리하는 별도의 패키지가 모노 리포지토리에 있으므로 별칭을 추가해야 했습니다.

sourcesoft 에 2019년 08월 23일

👍2

lerna 또는 저와 같은 monorepo를 사용하는 경우 Webpack 해결 구성에 이와 같은 sth를 추가하십시오.
...
    alias: {
      'react-dom': 'path/to/main-package/node_modules/react-dom',
      react: 'path/to/main-package/form/node_modules/react',
  }
...
Storybook에서 가져오는 경우 사용자 지정 Webpack 구성에도 추가하십시오.
참고로, 이 방법으로 문제가 해결되면 웹팩 빌드 번들에도 2가지 버전의 반응이 있습니다(웹팩 번들 분석기와 같은 sth를 사용하여 검사). 제 경우에는 번들링과 모든 도구를 처리하는 별도의 패키지가 모노 리포지토리에 있으므로 별칭을 추가해야 했습니다.

감사합니다. 제 문제가 해결되었습니다. docs 다른 React를 설치했는데 이 때문에 이 문제가 발생했습니다.

mysteryven 에 2019년 09월 03일

저는 아주 기본적인 방식으로 hook을 호출합니다.
import React, {useState} from 'react'
import ReactDOM from 'react-dom'

function App() {
const [number, setNumber] = useState(0);
const increase = () => {
    setNumber(number+1);
}
return <div>
<span>Counting: {number}</span>
<button onClick={increase} >Increase</button>
</div>
}

const selector = document.getElementById('app');

ReactDOM.render(<App />, selector);
나는 오류를 얻는다
Hooks can only be called inside of the body of a function component.
스케치에서 반응 프로젝트를 많이 생성했지만 이전에는 이 오류가 발생하지 않았습니다.
후크의 모든 규칙을 이해합니다.
디버깅하고 해결하기 위해 12시간 동안 시간을 할애하지만 불행히도 그럴 수 없습니다. 지금은 잘 모르겠습니다.
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // I get true

React 및 React DOM 버전이 일치하지 않을 수 있습니다.
React 버전을 변경하여 동일한 문제를 해결했습니다.

jafartke 에 2019년 09월 11일

👎3

내 구성 요소를 기능적 구성 요소에서 classfull 구성 요소로 변경하려고 할 때 이 문제에 직면했으며 이 오류도 발생하므로 이 오류에 대한 해결책이 여기에 있습니다. 귀하의 경우에도 도움이 되기를 바랍니다.

이 경우 고차 구성 요소를 사용해보십시오.

'반응'에서 React 가져오기;
'prop-types'에서 PropType을 가져옵니다.
'@material-ui/styles'에서 { withStyles } 가져오기;
'@material-ui/core/Button'에서 버튼 가져오기;

const 스타일 = 테마 => ({
루트: {
배경: '선형 그라데이션(45deg, #FE6B8B 30%, #FF8E53 90%)',
테두리: 0,
테두리 반경: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
색상: '흰색',
키: 48,
패딩: '0 30px',
},
});

클래스 HigherOrderComponent는 React.Component를 확장합니다. {

세우다(){
const { 클래스 } = this.props;
반품 (

HigherOrderComponent.propTypes = {
클래스: PropTypes.object.isRequired,
};

기본 내보내기 withStyles(styles)(HigherOrderComponent);

abdulmoizshaikh 에 2019년 09월 20일

나는 React와 FWIW를 배우고 있으며 다음과 같이 App()을 렌더링하려고 할 때도 문제를 보았습니다.

ReactDOM.render(App(), $("#root"));

내 추론은 <App /> 가 App 구성 요소를 삽입하기 위해 암시적으로 미니 템플릿을 생성한다는 것이므로 대신 JSX 템플릿을 반환하는 App을 직접 호출했습니다.

그러나 setState()를 사용하기 시작하면 앞서 언급한 문제가 발생했습니다. <App /> 변경하면 이 문제가 해결되었습니다.

ReactDOM.render(<App />, $("#root"));

참고: $는 도우미 const $ = sel => document.querySelector(sel); 뿐입니다.

fabd 에 2019년 10월 09일

제안된 모든 수정 사항을 해결한 후에도 이 오류가 계속 발생하는 경우 프로젝트를 실행할 때 올바른 디렉터리 대소문자를 사용하고 있는지 다시 확인하십시오. 나는 내 PC에 계속 문제가 있었고 이것이 그 이유임을 발견했습니다.

https://stackoverflow.com/questions/58365151/hooks-error-invalid-hook-call-using-nextjs-or-reactjs-on-windows

dbeaudway 에 2019년 10월 13일

react-dom 를 16.10.2 버전으로 업데이트한 후 테스트를 실행할 때 해당 오류가 발생했습니다. enzyme-adapter-react-16 를 1.15.1 버전으로 업그레이드하면 문제가 해결되었습니다.

joselcc 에 2019년 10월 17일

오, 나는 반응 v16.10.2에 있습니다. 나는 이미 몇 시간 동안 이것과 싸우려고 노력했지만 더 중요한 일이 있기 때문에 더 이상 이 전투를 계속하지 않을 것입니다. 지금은 react-final-form 4.1.0을 사용하는 것이 좋습니다. 좌절감.

rockneverdies55 에 2019년 10월 18일

이것은 내 문제를 해결했습니다.

https://github.com/facebook/create-react-app/issues/7676#issuecomment -531543375

DanielAllt 에 2019년 11월 06일

나는 의존성을 업그레이드한 직후에 같은 문제를 겪었고 이것을 해결하기 위해 몇 시간을 보냈습니다.

npm ls react 는 다음을 보여주었습니다.

├─┬ @storybook/[email protected]
│ └── [email protected]
└── [email protected]

react 및 react-dom 를 16.9.0 하면 일시적인 종속성이 사라지므로 오류가 사라집니다. 나는 처음에 이것이 16.8.6 에서도 문제가 발생했다는 것을 알아차릴 때까지 16.10.0 회귀가 있다는 것을 의미한다고 생각했습니다(일시적인 종속성이 분명히 고정되었기 때문에).

yarn의 resolutions 필드 는 특히 lerna monorepos에서 제대로 작동하기가 약간 까다롭습니다. 그러나 React의 두 번째 사본을 제거하는 것이 트릭을 수행했습니다. 나는 그것이 번들로 어떻게 끝났는지 여전히 모르지만 그것이 문제를 일으킨 원인입니다.

지금은 @storybook/addon-info 완전히 삭제하는 것을 고려하고 있습니다. React 0.14에 대한 종속성이 있는 다른 종속성에도 의존하기 때문입니다(예). 하지만 아직 문제가 발생하지는 않았습니다.

편집: 기록을 위해, 나는 resolutions 를 중복을 제거할 수 없었고 React 사본이 번들에 들어왔다는 것을 믿기를 거부했기 때문에 이것에 대해 약 4시간을 보냈습니다. 나처럼 하지마. 일시적인 React를 중복 제거하십시오.

pluma 에 2019년 11월 19일

이것은 HOC 내부에서 후크를 사용하는 경우 발생합니다.
const HOC = Component => {
  return (props) => {
    const [val] = useState();
    return <div>{val}</div>
  }
}

나는 또한 같은 문제에 직면하고 있습니다.

https://stackoverflow.com/questions/59173968/react-error-hooks-can-only-be-called-inside-the-body-of-a-function-component?noredirect=1#comment104570333_59173968

저를 안내해 주시겠습니까?

Neeraj-swarnkar 에 2019년 12월 04일

👍5

@Neeraj-swarnkar 여전히 오류가 발생하는 최소한의 예제로 문제를 줄이십시오.

거의 항상 두 가지 문제 중 하나로 요약됩니다.

구성 요소를 전달한다고 생각하지만 실제로는 렌더링 소품입니다(즉, "구성 요소"는 구성 요소가 아니라 함수로 호출됨).
일시적인 종속성을 통해 어떻게든 둘 이상의 React 버전을 번들로 묶었고 서로의 발가락을 밟습니다.

슬프게도 이 경우 스택 추적은 오해의 소지가 있는 경향이 있지만 오류 메시지는 일반적으로 올바른 아이디어를 제공합니다.

pluma 에 2019년 12월 04일

@Neeraj-swarnkar 여전히 오류가 발생하는 최소한의 예제로 문제를 줄이십시오.
거의 항상 두 가지 문제 중 하나로 요약됩니다.
구성 요소를 전달한다고 생각하지만 실제로는 렌더링 소품입니다(즉, "구성 요소"는 구성 요소가 아니라 함수로 호출됨).
일시적인 종속성을 통해 어떻게든 둘 이상의 React 버전을 번들로 묶었고 서로의 발가락을 밟습니다.
슬프게도 이 경우 스택 추적은 오해의 소지가 있는 경향이 있지만 오류 메시지는 일반적으로 올바른 아이디어를 제공합니다.

포인터 주셔서 감사합니다. 더 잘할 수 있는 작업이나 이 문제를 해결하려면 어떻게 해야 합니까?

Neeraj-swarnkar 에 2019년 12월 04일

@Neeraj-swarnkar는 여전히 동일한 오류가 발생하는 최소한의 예제가 있을 때까지 코드를 주석 처리하고 자리 표시자로 교체해 봅니다.

동료나 동료가 없는 경우 이 문제를 디버깅하는 데 도움을 요청할 수 있습니다. 지역 모임, 스터디 그룹 또는 근무 시간을 여는 회사를 찾아 도움을 요청할 수 있습니다. 다른 모든 방법이 실패하면 다른 사람을 고용하여 조사하십시오.

pluma 에 2019년 12월 06일

내 라이브러리와 create-react-app은 서로 상대적이며 npm 링크를 사용하고 있습니다.
이 부분을 읽었습니까?
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate - 반응
link 워크플로를 직접 처리합니다.

이것은 매력처럼 작동합니다!

ladifire 에 2019년 12월 30일

내 라이브러리와 create-react-app은 서로 상대적이며 npm 링크를 사용하고 있습니다.
이 부분을 읽었습니까?
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate - 반응
link 워크플로를 직접 처리합니다.

이것은 매력처럼 작동합니다!

ladifire 에 2019년 12월 30일

어제 이 문제를 해결했는데 반나절 동안 귀찮게 했습니다.

ZeldaYuan 에 2020년 01월 14일

나는 이것을 변화로 해결한다

                <Route key={index} render={route.component} path={route.path} />

에게

                <Route key={index} component={route.component} path={route.path} />

하지만 나는 왜 그런지 모르겠다 :(

그것은 나를 위해 작동하지만 나도 이유를 모르겠습니다.

qtwwyl 에 2020년 01월 15일

머티리얼 UI에서 HOC + makeStyles 를 사용하기 때문에 여기에 오는 경우,
여기 당신의 대답이 있습니다: https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-function-com

benlinton 에 2020년 01월 29일

나는 이것을 변화로 해결한다
                <Route key={index} render={route.component} path={route.path} />
에게
                <Route key={index} component={route.component} path={route.path} />
하지만 나는 왜 그런지 모르겠다 :(
그것은 나를 위해 작동하지만 나도 이유를 모르겠습니다.

"component" 소품은 React 구성요소를 예상하고 "render" 소품은 함수로 호출될 함수를 예상합니다. 함수 구성 요소는 구성 요소이며 후크를 사용하는 경우 작동하지 않으며 일반적으로 좋은 생각이 아닙니다.

pluma 에 2020년 01월 30일

나는 이것을 변화로 해결한다

                <Route key={index} render={route.component} path={route.path} />

에게

                <Route key={index} component={route.component} path={route.path} />

하지만 나는 왜 그런지 모르겠다 :(

고마워, 친애하는, 그것은 나를 위해 일했습니다. 여전히, 나는 혼란 스럽습니다. 이유는 무엇입니까?

jaisonjjames 에 2020년 02월 17일

@jaisonjjames 내 답장을 참조하십시오. 차이점을 이해하는 데 문제가 있는 경우 StackOverflow에 대한 몇 가지 설명이 있습니다. https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render

pluma 에 2020년 02월 18일

제 경우에는 react-router의 hook인 component 외부에 let match = useRouteMatch("/user/:id"); 가 있으므로 오류가 맞습니다.

Rolando-Barbella 에 2020년 02월 27일

~에서

에게

gabrielyangzon 에 2020년 03월 05일

👍4 👎2 🎉1

~에서

<Route path="/component" component={myComponent} />

에게

<Route path="/component"><myComponent /></Route>

ammoradi 에 2020년 03월 28일

😕1 👎1 👍1

제 경우에는 React 버전이 다른 window 객체의 라이브러리를 참조했습니다. 나는 결국 그 라이브러리의 react 및 react-dom 참조하는 데 도움이 되는 webpack의 externals 구성 옵션을 사용하여 오류를 제거했습니다.

그래서 이 오류가 발생한 이유는 You might have more than one copy of React in the same app 때문이라고 생각합니다.

AbreezaSaleem 에 2020년 04월 15일

제 경우에는 React 버전이 다른 window 객체의 라이브러리를 참조했습니다. 나는 결국 그 라이브러리의 react 및 react-dom 참조하는 데 도움이 되는 webpack의 externals 구성 옵션을 사용하여 오류를 제거했습니다.
그래서 이 오류가 발생한 이유는 You might have more than one copy of React in the same app 때문이라고 생각합니다.

@AbreezaSaleem 어떻게 이것을 달성 했습니까? react 가 외부로 있는 라이브러리를 사용하는 동일한 문제가 있습니다. 어떻게든 다른 버전으로 표시됩니다... externals: [ 'react' ] , externals: { react: 'react' } 및 externals: { react: 'React' } , 결과는 항상 동일합니다...

Myrdden 에 2020년 04월 18일

나는 이것을 재현하기 위해 다소 최소한의 예제를 만들었습니다. 제 경우에는 electron-webpack 및 react-dropzone이 있는 ElectronJS에서 문제가 발생합니다.

https://github.com/JuanIrache/dropzone-test

JuanIrache 에 2020년 04월 23일

동일한/단일 반응 인스턴스를 가리키는 멋진 웹팩 구성 솔루션이 있습니다. 'to be npm 모듈'을 사용하는 앱 내부에 해상도를 추가하는 것이었습니다.

webpack.config.js 내부에서 반응에 별칭을 추가하여 하나의 반응 인스턴스를 사용합니다.

module.exports = {
resolve: {
    alias: {
      react: path.resolve('./node_modules/react')
    }
  },
 // other webpack settings
}

Yolantele 에 2020년 05월 08일

👍3 🚀2 ❤1

오늘 배운(lerned?) lerna는 이 문제를 일으킬 수 있습니다.

lerna 사용자는 구성 요소 라이브러리를 개발하는 경우 라이브러리의 종속성에 반응을 포함하지 말고 peerDependencies에 넣고 @types/react를 devDependencies에 넣습니다.

rettgerst 에 2020년 06월 02일

lerna를 사용하는 모든 사람은 코드가 다른 패키지의 구성 요소를 참조하는 한 패키지에서 테스트를 실행할 때 이 문제를 접할 수 있습니다.

이 경우에 우리가 경험한 문제는 사양에서 임포트되는 반응과 Material UI의 후크를 사용하여 구현되는 되었기 때문 입니다.

반응은 내부적으로 ReactCurrentDispatcher.current 변수의 상태를 관리하는 것으로 보이며 이는 결국 반응의 한 인스턴스에서 설정되지만 반응의 다른 인스턴스에서 사용됩니다. 비어 있으면 Invalid hook call ... 던집니다.

우리는 이미 Craco 를 사용하여 빌드 시 Create React App의 webpack 구성을 재정의하고 있었습니다.

  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },

그러나 이 웹팩 재정의는 빌드 시에만 사용됩니다. 테스트를 실행할 때 코드는 빌드되지 않고 소스에서 인스턴스화됩니다. 따라서 우리의 솔루션은 craco.config.js 에서 CracoAlias 를 사용하여 지정하는 것이었습니다. 테스트 중 반응 경로:

  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          // We need to alias react to the one installed in the desktop/node_modules
          // in order to solve the error "hooks can only be called inside the body of a function component"
          // which is encountered during desktop jest unit tests,
          // described at https://github.com/facebook/react/issues/13991
          // This is caused by two different instances of react being loaded:
          // * the first at packages/desktop/node_modules (for HostSignUpDownloadComponent.spec.js)
          // * the second at packages/components/node_modules (for packages/components/Modal)
          react: './node_modules/react',
        },
      },
    },
  ],

jasondarwin 에 2020년 06월 04일

👍1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React: 잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다. 다음 이유 중 하나로 인해 발생할 수 있습니다.

가장 유용한 댓글

모든 61 댓글

관련 문제