React: 無効なフック呼び出し。 フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。 これは、次のいずれかの理由で発生する可能性があります。

https://github.com/facebook/react/issues/13991の人々と同じ問題に直面していると思います。問題の一番下に示されている回避策のいくつかを見て、それらを確認してください。あなたのために働きますか？

これは、HOC内でフックを使用した場合に発生します。

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

@ revskill10は、コードサンドボックスの再現で別の問題を作成してください。

https://www.npmjs.com/package/webpack-bundle-analyzerを使用することをお勧めします

2つのreactビルドを追加してこの問題を引き起こすライブラリの場合、reactとreact-domを親アプリケーションにリンクするのを忘れることがよくあります。

その場合は、npm link react andreact-domを親バージョンのreactandreact-domにリンクするだけではありません。

私のライブラリとcreate-react-appは相互に関連しており、npmリンクを使用しています

この部分を読みましたか？

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

linkワークフローに直接対応します。

（これで問題が解決しない場合はお知らせください。再開できます。詳細な説明に感謝します。）

ピッチインしてくれてありがとう

@gaearon Reactページの推奨事項に従って、これを解決することをすでに試みて再試行しました。

これらの指示をすべて

@threepointoneはおかしいので、多くの人が＃13991でこれに対する解決策を見つけました。私は昨日の残りの時間を、それらの実装に費やしましたが、成功しませんでした。

わかりました。これで問題が解決しない場合は、開いたままにして、誰かが問題をデバッグして支援できるようにします。 問題は同じです（パッケージをリンクする方法により、バンドル内で重複します）が、提案がうまくいかなかった理由はわかりません。

@gaearonこれで閉じることができ、上記の解決策が機能しました。

私は非常に基本的な方法でフックを呼び出すだけです。

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.
スケッチから多くのreactプロジェクトを作成しましたが、これまでこのエラーが発生することはありませんでした。
私はフックのすべてのルールを理解しています。
私はそれをデバッグして解決するために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

@xeastcrastは問題を解決できましたか？

@carlosriveros
ケース1：
スクリプトタグバンドルが1つしかないindex.htmlを確認している可能性があります

index.htmlを確認した後に同じエラーが発生した場合
ケース2：
Webpack htmlを使用する場合は、webpack.configファイル内のpluginsプロパティで
また、新しいHTMLWebpackPlugin（）;のオプションに{reject：true}がありません。

index.htmlのバンドルにソースを送信するスクリプトタグを削除する必要があります

HTMLWebpackPluginは、バンドルファイルを含むスクリプトタグを自動的に追加するためです。

こんにちは、ReactHooksは初めてです。 プロジェクトで検索バーを作成するためにMaterial-UIを使用しました。 私はこのコードを書きましたが、これは機能せず、同じ問題を引き起こしています。 React Hooksのドキュメントを読みましたが、これに関して何も得られませんでした。
REACTJSコード
`` `import React from'react ';
import {makeStyles} from '@ material-ui / core / styles';
'@ material-ui / core / Paper'からPaperをインポートします。
'@ material-ui / core / InputBase'からInputBaseをインポートします。
'@ material-ui / core / IconButton'からIconButtonをインポートします。
'@ material-ui / icons / Search'からSearchIconをインポートします;

const useStyles = makeStyles（{
根： {
パディング： '2px 4px'、
表示： 'フレックス'、
alignItems： 'center'、
幅：400、
}、
入力：{
marginLeft：8、
フレックス：1、
}、
iconButton：{
パディング：10、
}、
仕切り：{
幅：1、
高さ：28、
マージン：4、
}、
}）;

関数Feature（）{
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

期待される結果

• 組み込みのVSCODEと予想される_A検索バー_
  出力
  _TypeError：Object（...）は関数ではありません_
  _無効なフック呼び出し。 フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。 これは、次のいずれかの理由で発生する可能性があります。

試す
CODESANDBOXで実行する_Try、すべての実行はfine_それを確認してください。

こんにちは、ReactHooksは初めてです。 プロジェクトで検索バーを作成するために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;

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

期待される結果

• 組み込みのVSCODEと予想される_A検索バー_
  出力
  _TypeError：Object（...）は関数ではありません_
  _無効なフック呼び出し。 フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。 これは、次のいずれかの理由で発生する可能性があります。

試す
CODESANDBOXで実行する_Try、すべての実行はfine_それを確認してください。

material-uiを使用するときにもこの質問に答えます。

@stupidsongshu 、それであなたはそれをどのように解決しましたか？

こんにちは、ReactHooksは初めてです。 プロジェクトで検索バーを作成するために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;

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

期待される結果

• 組み込みのVSCODEと予想される_A検索バー_
  出力
  _TypeError：Object（...）は関数ではありません_
  _無効なフック呼び出し。 フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。 これは、次のいずれかの理由で発生する可能性があります。

試す
CODESANDBOXで実行する_Try、すべての実行はfine_それを確認してください。

これは今日私に起こりました、そして私はただnpm install --save react-dom @latestを実行します

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

ヘルプページに記載されている手順に従いましたが、それでも問題は解決しませんでした

私にとっては、Reactを小道具として渡すだけで、今のところそれを解決しました。 これは私たちが完全に制御できるアプリと個別のモジュールであるため、すべての人に適用されるかどうかはわかりません。

それも私を助けませんでした。
React＆React-DOM = 16.8.0およびMaterial-UI = 4.1.3の使用

私はこのフックの問題に関するすべての解決策をテストしてきました。フックを使用して外部ライブラリからコンポーネントをインポートすると、2つのreactインスタンス（ライブラリから1つ、アプリから1つ）があるためクラッシュします。

私はすべての提案に従いましたが、これまで何も機能していません。 さらに明確になるまで状態のあるコンポーネントを作成します...

ここで同じ問題。 2つのreactインスタンスを持つプロジェクトがあります。 一つとしてlibと1 app消費しているlib 。

yarn.lock 、 package-lock.json 、 node_modules 、 dist 、種類のキャッシュとビルドファイルを削除して解決し、 yarnまたはnpm install実行しますライブラリを再度インストールするための

私はこれを変更によって解決します

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

に

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

でも理由はわかりません:(

誤ってレンダリングする代わりにコンポーネントを使用することで修正されました。 公式ガイドはこのシナリオについて言及していません。
ありがとう、xyj404
<Route path="/login" exact component={LoginForm} />

同じ問題がありましたが、原因が異なりました。 自動インポートプラグインまたはスニペットを使用している場合は、同じケースからインポートするようにしてください。

import {useEffect} from 'react'とimport {useEffect} from 'React'が混在している場合は、この問題が発生します。

ストーリーブックではすべて正常に機能しますが、この問題もありますが、アプリケーションで使用すると同じエラーが発生します

同じ問題も機能します
ストーリーブックでは問題ありませんが、アプリを使用するとこのエラーがスローされます

同じエラー、 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"
  ]
}

npmリンクを使用してリンクされた別のアプリで@material-ui/coreからmakeStylesフックを使用して、reactとreact-domの両方v16.8.6を使用して、この状況に遭遇しました。

メインアプリをreactおよびreact-domv16.9.0にアップグレードし、問題の原因となっているフックを使用していたアプリを再リンクした後、すべてが再び機能し始めました。

ええ、@ material-uiを使用したときに同じ問題が発生しました。 この問題を理解するにはもっと時間がかかります。 それから私はグーグルを検索し、これに対する解決策を見つけました。 ここにありますhttp://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component/

元の投稿：

React内でMaterialUIコードを記述し、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>
      );
   }
}

これは、単純な関数から再利用可能なコンポーネントを作成する方法も示しています。

=>クレイジーですが、うまく機能しています。 これがお役に立てば幸いです。

lernaまたは私のようなmonorepoを使用している場合は、このようなsthをWebpackのresolveconfigに追加してください

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

Storybookで取得している場合は、そこのカスタムWebpack構成にも追加します。

ちなみに、これで問題が解決する場合は、webpackでビルドされたバンドルにも2つのバージョンのreactが含まれています（webpackバンドルアナライザーのようなsthを使用して検査してください）。 私の場合、バンドルとすべてのツールを処理する別のパッケージがモノレポにあったため、エイリアスを追加する必要がありました。

lernaまたは私のようなmonorepoを使用している場合は、このようなsthをWebpackのresolveconfigに追加してください

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

Storybookで取得している場合は、そこのカスタムWebpack構成にも追加します。

ちなみに、これで問題が解決する場合は、webpackでビルドされたバンドルにも2つのバージョンのreactが含まれています（webpackバンドルアナライザーのようなsthを使用して検査してください）。 私の場合、バンドルとすべてのツールを処理する別のパッケージがモノレポにあったため、エイリアスを追加する必要がありました。

ありがとう、それは私の問題を解決しました、私はこの問題を引き起こした私のdocs辞書に別のReactをインストールしました。

私は非常に基本的な方法でフックを呼び出すだけです。

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.
スケッチから多くのreactプロジェクトを作成しましたが、これまでこのエラーが発生することはありませんでした。
私はフックのすべてのルールを理解しています。
私はそれをデバッグして解決するために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とReactDOMのバージョンが一致していない可能性があります。
Reactバージョンを変更することで同じ問題を解決しました

コンポーネントを機能コンポーネントからクラスフルコンポーネントに変更しようとすると、この問題に直面しました。また、このエラーが発生するので、このエラーに関する私の解決策は、あなたの場合にも役立つことを願っています。

この場合、より高次のコンポーネントを使用してみてください

'react'からReactをインポートします。
'prop-types'からPropTypesをインポートします。
import {withStyles} from '@ material-ui / styles';
'@ material-ui / core / Button'からボタンをインポートします。

const styles = theme =>（{
根： {
背景： 'linear-gradient（45deg、＃FE6B8B 30％、＃FF8E53 90％）'、
ボーダー：0、
borderRadius：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）;をエクスポートします。

私はReactとFWIWを学んでいますが、App（）を次のようにレンダリングしようとしたときにも問題が発生しました。

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

私の推論は、 <App />がAppコンポーネントを挿入するためだけに暗黙的にミニテンプレートを作成するため、代わりにAppを直接呼び出してJSXテンプレートを返すというものでした。

ただし、setState（）を使い始めると、前述の問題が発生しました。 <App />変更すると、これが解決しました。

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

注：$は単なるヘルパーですconst $ = sel => document.querySelector(sel);

提案されたすべての修正のトラブルシューティングを行ってもこのエラーが発生する場合は、プロジェクトの実行時に正しいディレクトリケーシングを使用していることを再確認してください。 私は自分のPCで問題を抱え続け、これが理由であることに気づきました。

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

react-domをバージョン16.10.2に更新した後、テストを実行すると、このエラーが発生していました。 enzyme-adapter-react-16をバージョン1.15.1アップグレードすると修正されました

ああ、私はreactv16.10.2を使用しています。 私はすでにこれと戦うために数時間を費やしましたが、もっと重要なことがあるので、これ以上この戦いを続けることはありません。 今のところ、react-final-form4.1.0のままで大丈夫です。 なんて欲求不満。

これは私の問題を解決しました：

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

依存関係をアップグレードした直後に同じ問題が発生し、これを突き止めるのに何時間も費やしました。

npm ls reactは次のことを示しました。

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

reactとreact-domを16.9.0固定すると、一時的な依存関係がなくなるため、エラーがなくなりました。 これは、問題が16.8.6でも発生していることに気付くまで、 16.10.0リグレッションが発生したことを意味すると最初に思いました（一時的な依存関係が明らかに固定されていたため）。

ヤーンのresolutionsフィールドは、特にlerna monoreposで正しく機能させるには少し厄介ですが、Reactの2番目のコピーを削除することでうまくいきました。 それがどのようにしてバンドルに含まれるのかはまだわかりませんが、それが問題の原因です。

@storybook/addon-info完全に削除することを検討しています。これは、React 0.14に依存する別の依存関係にも依存しているためです（はい）。ただし、それはまだ問題を引き起こしていません。

編集：記録のために、重複を排除するためにresolutionsを取得できず、Reactのコピーがバンドルに入ったとさえ信じることを拒否したため、これに約4時間を費やしました。 私のようにならないでください。 一時的なReactを重複排除します。

これは、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問題を最小限の例に減らしてみてください。それでも、エラーが発生します。

ほとんどの場合、次の2つの問題のいずれかに要約されます。

• コンポーネントを渡していると思いますが、実際にはレンダリングプロップです（つまり、「コンポーネント」はコンポーネントではなく関数として呼び出されています）
• あなたはどういうわけかあなたの一時的な依存関係を介してReactの複数のバージョンをバンドルしました、そしてそれらはお互いのつま先を踏みます

悲しいことに、この場合、スタックトレースは誤解を招く傾向がありますが、エラーメッセージは一般的に正しい考えを示します。

@ Neeraj-swarnkar問題を最小限の例に減らしてみてください。それでも、エラーが発生します。

ほとんどの場合、次の2つの問題のいずれかに要約されます。

• コンポーネントを渡していると思いますが、実際にはレンダリングプロップです（つまり、「コンポーネント」はコンポーネントではなく関数として呼び出されています）
• あなたはどういうわけかあなたの一時的な依存関係を介してReactの複数のバージョンをバンドルしました、そしてそれらはお互いのつま先を踏みます

悲しいことに、この場合、スタックトレースは誤解を招く傾向がありますが、エラーメッセージは一般的に正しい考えを示します。

ポインタをありがとう、あなたは私にもっと良くできること、またはこれを修正するために何をすべきかを教えてもらえますか？

@ Neeraj-swarnkarは、同じエラーが発生する最小限の例が得られるまで、コードをコメントアウトしてプレースホルダーに置き換えてみます。

同僚や同僚がいない場合は、これをさらにデバッグするのを手伝ってもらうことができます。地元の交流会、研究会、または営業時間を行っている会社を見つけて、助けを求めることができます。 他のすべてが失敗した場合は、誰かを雇って調べてもらいます。

私のライブラリとcreate-react-appは相互に関連しており、npmリンクを使用しています

この部分を読みましたか？

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

linkワークフローに直接対応します。

これは魅力のように機能します！

私のライブラリとcreate-react-appは相互に関連しており、npmリンクを使用しています

この部分を読みましたか？

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

linkワークフローに直接対応します。

これは魅力のように機能します！

私は昨日この問題を解決しました、それは半月の間私を悩ませました。昨日私はコードをごくわずかに短くしました（ただ追加してください

私はこれを変更によって解決します

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

に

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

でも理由はわかりません:(

それは私にとってはうまくいきますが、理由もわかりません。

HOC + Material UIのmakeStylesを使用しているためにここに来る場合は、
ここにあなたの答えがあります： https ：

私はこれを変更によって解決します

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

に

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

でも理由はわかりません:(

それは私にとってはうまくいきますが、理由もわかりません。

「component」プロップはReactコンポーネントを想定しており、「render」プロップは関数として呼び出される関数を想定しています。 関数コンポーネントはコンポーネントであり、フックを使用すると通常の関数は機能しないため、それらを呼び出すことはお勧めできません。

私はこれを変更によって解決します

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

に

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

でも理由はわかりません:(

ありがとう、親愛なる、それは私のために働いた、それでも、私は混乱している、なぜですか？

@jaisonjjamesは私の返信を参照してください。 違いを理解するのに問題がある場合は、StackOverflowに関するいくつかの説明があります： https ：

私の場合、コンポーネントの外側にlet match = useRouteMatch("/user/:id");ありました。これは、react-routerからのフックであるため、エラーは正しかったです。

から

に

から

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

に

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

私の場合、Reactのバージョンが異なるwindowオブジェクトのライブラリを参照していました。 最終的にwebpackのexternals構成オプションを使用することになり、そのライブラリのreactとreact-domを参照するのに役立ち、エラーがなくなりました。

したがって、このエラーが発生した理由は、 You might have more than one copy of React in the same appと考えています。

私の場合、Reactのバージョンが異なるwindowオブジェクトのライブラリを参照していました。 最終的にwebpackのexternals構成オプションを使用することになり、そのライブラリのreactとreact-domを参照するのに役立ち、エラーがなくなりました。

したがって、このエラーが発生した理由は、 You might have more than one copy of React in the same appと考えています。

@AbreezaSaleemどのようにしてこれを達成しましたか？ 私は同じ問題を抱えています、外部としてreactを持っているライブラリを使用すると、どういうわけか別のバージョンとして表示されます...私はexternals: [ 'react' ] 、 externals: { react: 'react' }を試しましたとexternals: { react: 'React' } 、結果は常に同じです...

これを再現するために、やや最小限の例を作成しました。 私の場合、問題はelectron-webpackとreact-dropzoneを使用するElectronJSで発生します

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

同じ/単一のreactインスタンスを指すための優れたwebpack構成ソリューションがあります。 'to benpmmodule'を使用しているアプリ内に解像度を追加することでした。

webpack.config.js内で、reactにエイリアスを追加します-その1つのreactインスタンスを使用します：

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

私が今日学んだように（lerned？）、lernaはこの問題を引き起こす可能性があります。

lernaユーザーは、コンポーネントライブラリを開発している場合、ライブラリの依存関係にreactを含めず、peerDependenciesに配置し、devDependenciesに@ types / reactを配置します。

lernaを使用している場合、あるパッケージでテストを実行すると、コードが別のパッケージのコンポーネントを参照するときに、この問題が発生する可能性があります。

この場合に発生した問題は、反応が仕様にインポートされ、マテリアルUIのフックを使用して実装された原因でした。

reactはReactCurrentDispatcher.current変数の状態を内部的に管理しているようです。これは、reactの一方のインスタンスで設定されますが、reactのもう一方のインスタンスで使用されます。空の場合はInvalid hook call ...スローします。

ビルド時にCreateReactAppのwebpack構成をオーバーライドするためにすでにCracoを使用していました。

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

ただし、このWebpackオーバーライドはビルド時にのみ使用されます（テストの実行時には、コードはビルドされませんが、ソースからインスタンス化されます）。したがって、ソリューションは、 craco.config.jsでCracoAliasを使用して指定することcraco.config.jsた。テスト中の反応パス：

  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',
        },
      },
    },
  ],