React: Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Rumpfs einer Funktionskomponente aufgerufen werden. Dies kann aus einem der folgenden Gründe passieren:

Ich denke, Sie stehen vor dem gleichen Problem wie die Leute in https://github.com/facebook/react/issues/13991 Könnten Sie sich einige der Problemumgehungen ansehen, die ganz unten im Problem aufgeführt sind, und sie sehen? Arbeite für dich?

Dies passiert, wenn ich Hook in einem HOC verwende.

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

@revskill10 Bitte machen Sie ein separates Problem mit einem Codesandbox-Repro.

Ich empfehle Ihnen, https://www.npmjs.com/package/webpack-bundle-analyzer zu verwenden

Es kommt vor, dass wir im Fall von Bibliotheken, die zwei Builds von React hinzufügen, oft vergessen haben, React und React-Dom mit der übergeordneten Anwendung zu verknüpfen, was zu diesem Problem führt.

Wenn dies der Fall ist, verwenden Sie nur den npm-Link React und React-Dom zur übergeordneten Version von React und React-Dom.

Meine Bibliothek und die create-react-app sind relativ zueinander und ich verwende npm link

Hast du diesen Teil gelesen?

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

Es adressiert direkt den link Workflow:

(Lassen Sie mich wissen, wenn dies nicht hilft und wir können wieder öffnen. Ich schätze die detaillierte Beschreibung.)

Danke an alle fürs Mitmachen

@gaearon Ich hatte bereits versucht, dies gemäß den Empfehlungen der React-Seite zu lösen:

Ich habe alle diese Anweisungen befolgt und erhalte immer noch den gleichen Fehler.

@threepointone lustig genug, dass so viele Leute unter Nr. 13991 Lösungen dafür Tages damit verbracht habe, sie ohne Erfolg umzusetzen.

Ok, wenn dies nicht geholfen hat, lassen Sie es offen, damit jemand Ihr Problem beheben und Ihnen helfen kann. Das Problem _ist_ das gleiche (die Art und Weise, wie Sie Pakete verknüpfen, führt dazu, dass sie im Bundle dupliziert werden), aber ich bin mir nicht sicher, warum der Vorschlag für Sie nicht funktioniert hat.

@gaearon Sie können es jetzt schließen, die obige Lösung hat funktioniert.

Ich nenne Hook nur ganz einfach.

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);

Ich bekomme Fehler
Hooks can only be called inside of the body of a function component.
Ich habe viele Reaktionsprojekte aus Skizzen erstellt, aber ich bekomme diesen Fehler noch nie.
Ich verstehe alle Hook-Regeln.
Ich verbringe eine Zeit für 12 Stunden, um es zu debuggen und zu lösen, aber leider kann ich nicht, Jetzt habe ich keine Ahnung.

// 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 konntest du das Problem lösen?

@carlosriveros
Fall 1:
Überprüfen Sie möglicherweise Ihre index.html, die nur ein Skript-Tag-Paket enthält

Wenn Sie die gleiche Fehlermeldung erhalten, nachdem Sie index.html überprüft haben
Fall 2:
Wenn Sie Webpack-HTML verwenden, In Plugins-Eigenschaft in der Datei webpack.config
Und nicht {reject: true} in der Option von new HTMLWebpackPlugin() haben;

Sie müssen das Skript-Tag entfernen, das zu Ihrem Bundle in index.html gehört

Weil HTMLWebpackPlugin automatisch ein Skript-Tag hinzufügt, das Ihre Bundle-Datei enthält.

Hallo, ich bin neu bei React Hooks. Ich habe gerade Material-UI zum Erstellen der Suchleiste in meinem Projekt verwendet. Ich habe diesen Code geschrieben, aber dieser funktioniert nicht und gibt das gleiche Problem. Ich habe die Dokumentation von React Hooks gelesen, aber nichts dazu erfahren.
REACTJS-CODE
```React aus 'react' importieren;
import { makeStyles } from '@material-ui/core/styles';
Importieren Sie Papier von '@material-ui/core/Paper';
importiere InputBase von '@material-ui/core/InputBase';
Importieren Sie IconButton von '@material-ui/core/IconButton';
importiere SearchIcon aus '@material-ui/icons/Search';

const useStyles = makeStyles({
Wurzel: {
Füllung: '2px 4px',
Anzeige: 'flex',
alignItems: 'zentrieren',
Breite: 400,
},
Eingabe: {
RandLinks: 8,
flex: 1,
},
SymbolSchaltfläche: {
Polsterung: 10,
},
Teiler: {
Breite: 1,
Höhe: 28,
Rand: 4,
},
});

Funktion Feature() {
const-Klassen = useStyles();

Rückkehr (





);
}

Standardfunktion exportieren;

**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"
  ]
}

AUSFÜHRUNG

• Knoten -- v10.15.3
• Reagieren -- ^16.8.5
• Material-UI -- ^4.0.1

ERWARTETES ERGEBNIS

• Integrierter VS CODE und erwartete _Eine Suchleiste_
  AUSGANG
  _TypeError: Object(...) ist keine Funktion_
  _Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Rumpfs einer Funktionskomponente aufgerufen werden. Dies kann aus einem der folgenden Gründe passieren:_

VERSUCHEN
_Try laufen in CODESANDBOX, alles läuft fine_ es prüfen .

Hallo, ich bin neu bei React Hooks. Ich habe gerade Material-UI zum Erstellen der Suchleiste in meinem Projekt verwendet. Ich habe diesen Code geschrieben, aber dieser funktioniert nicht und gibt das gleiche Problem. Ich habe die Dokumentation von React Hooks gelesen, aber nichts dazu erfahren.
REACTJS-CODE

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;

PAKET.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"
  ]
}

AUSFÜHRUNG

• Knoten -- v10.15.3
• Reagieren -- ^16.8.5
• Material-UI -- ^4.0.1

ERWARTETES ERGEBNIS

• Integrierter VS CODE und erwartete _Eine Suchleiste_
  AUSGANG
  _TypeError: Object(...) ist keine Funktion_
  _Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Rumpfs einer Funktionskomponente aufgerufen werden. Dies kann aus einem der folgenden Gründe passieren:_

VERSUCHEN
_Try laufen in CODESANDBOX, alles läuft fine_ es prüfen .

Diese Frage treffe ich auch bei der Verwendung von material-ui.

@stupidsongshu , also wie hast du es gelöst?

Hallo, ich bin neu bei React Hooks. Ich habe gerade Material-UI zum Erstellen der Suchleiste in meinem Projekt verwendet. Ich habe diesen Code geschrieben, aber dieser funktioniert nicht und gibt das gleiche Problem. Ich habe die Dokumentation von React Hooks gelesen, aber nichts dazu erfahren.
REACTJS-CODE

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;

PAKET.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"
  ]
}

AUSFÜHRUNG

• Knoten -- v10.15.3
• Reagieren -- ^16.8.5
• Material-UI -- ^4.0.1

ERWARTETES ERGEBNIS

• Integrierter VS CODE und erwartete _Eine Suchleiste_
  AUSGANG
  _TypeError: Object(...) ist keine Funktion_
  _Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Rumpfs einer Funktionskomponente aufgerufen werden. Dies kann aus einem der folgenden Gründe passieren:_

VERSUCHEN
_Try laufen in CODESANDBOX, alles läuft fine_ es prüfen .

Das ist mir heute passiert und ich habe einfach npm install ausgeführt --save response -dom@latest

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

Ich habe die Anweisungen auf der Hilfeseite befolgt, aber das Problem wurde immer noch nicht behoben

Für mich haben wir es vorerst gelöst, indem wir React einfach als Requisite herumgereicht haben. Dies ist eine App und separate Module, über die wir jedoch die volle Kontrolle haben, daher weiß ich nicht, ob sie für alle gilt.

Mir hat es auch nicht weitergeholfen..
Verwenden von React & React-DOM = 16.8.0 und Material-UI = 4.1.3

Ich habe alle Lösungen zu diesem Hook-Problem getestet. Jeder Import einer Komponente aus einer externen Bibliothek mit Hooks stürzt ab, da 2 Instanzen reagieren (eine aus der Bibliothek, eine aus meiner App).

Ich habe alle Vorschläge befolgt, bisher hat nichts funktioniert. Ich werde eine Komponente mit einem Zustand erstellen, bis es weiter geklärt ist ...

Gleiches Problem hier. Wir haben ein Projekt mit zwei Reaktionsinstanzen. Eine als lib und eine app , die die lib verbraucht.

Ich löse mit dem Entfernen von yarn.lock , package-lock.json , node_modules , dist , Art von Cache und Build-Dateien und führe dann yarn oder npm install für die erneute Installation von Bibliotheken. Jetzt gehts!

Ich löse das durch Veränderung

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

zu

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

aber ich weiß nicht warum :(

Behoben, indem versehentlich eine Komponente anstelle von Rendern verwendet wurde. Der offizielle Leitfaden erwähnte dieses Szenario nicht.
Danke, xyj404
<Route path="/login" exact component={LoginForm} />

Ich hatte das gleiche Problem, aber die Ursache war eine andere. Für alle, die Auto-Import-Plugins oder Snippets verwenden, stellen Sie sicher, dass Sie aus demselben Fall importieren.

Wenn Sie eine Mischung aus import {useEffect} from 'react' und import {useEffect} from 'React' Sie auf dieses Problem stoßen.

Ich habe auch dieses Problem, obwohl bei mir im Märchenbuch alles gut funktioniert, aber wenn es in der Anwendung verwendet wird, gibt es den gleichen Fehler

das selbe problem geht auch
im Märchenbuch gut, aber die Verwendung der App wirft diesen Fehler aus

Gleicher Fehler, ich erhalte ihn, wenn ich npm test ausführe, aber die App funktioniert einwandfrei.
Hier ist mein package.json , irgendwelche Vorschläge? Ich stecke wirklich fest und verschwende Zeit mit diesem Fehler

{
  "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"
  ]
}

Ich bin auch in diese Situation geraten, indem ich "react" und "react-dom" beide v16.8.6 verwendet habe, indem ich den makeStyles Hook von @material-ui/core in einer separaten App verwendet habe, die mit dem npm-Link verknüpft ist.

Nach dem Upgrade der Haupt-App auf React und React-Dom v16.9.0 und dem erneuten Verknüpfen der App, die die Hooks verwendet hat, die das Problem verursacht haben, funktionierte alles wieder.

Ja, ich hatte das gleiche Problem, als ich @material-ui verwende. Es dauert länger, dieses Problem zu lösen. Dann habe ich bei Google gesucht und eine Lösung dafür gefunden. Es ist hier http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component/

Ursprünglicher Beitrag:

Wenn Sie sich einige Beispiele für das Schreiben von Material-UI-Code in React und die Verwendung von TypeScript (in einer .tsx-Datei, um genau zu sein) ansehen, stoßen Sie möglicherweise zur Laufzeit auf einen Fehler wie „Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Rumpfs einer Funktionskomponente aufgerufen werden“.

Hier ist ein Beispiel für den Code, der diesen Fehler verursacht

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>
       );
   }
}

Was wir tun müssen, ist den useStyles-Code in eine Funktion zu packen und den Code zu ersetzen, der ihn verwendet, also zum Beispiel

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>
      );
   }
}

Dies zeigt auch, wie wir aus einer einfachen Funktion wiederverwendbare Komponenten erstellen können.

=> Es ist verrückt, aber es funktioniert gut. Hoffe das kann helfen.

Wenn Sie wie ich lerna oder ein Monorepo verwenden, fügen Sie so etwas zu Ihrer Webpack-Auflösungskonfiguration hinzu

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

Wenn Sie es in Storybook erhalten, fügen Sie es auch dort zur benutzerdefinierten Webpack-Konfiguration hinzu.

Eine Randnotiz, wenn dies das Problem für Sie behebt, enthält Ihr Webpack-Build-Bundle auch 2 Versionen von React (verwenden Sie etw wie den Webpack-Bundle-Analyzer, um es zu überprüfen). In meinem Fall hatte ich ein separates Paket in meinem Monorepo, das sich um die Bündelung und alle Tools kümmerte, also musste ich einen Alias ​​hinzufügen.

Wenn Sie wie ich lerna oder ein Monorepo verwenden, fügen Sie so etwas zu Ihrer Webpack-Auflösungskonfiguration hinzu

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

Wenn Sie es in Storybook erhalten, fügen Sie es auch dort zur benutzerdefinierten Webpack-Konfiguration hinzu.

Eine Randnotiz, wenn dies das Problem für Sie behebt, enthält Ihr Webpack-Build-Bundle auch 2 Versionen von React (verwenden Sie etw wie den Webpack-Bundle-Analyzer, um es zu überprüfen). In meinem Fall hatte ich ein separates Paket in meinem Monorepo, das sich um die Bündelung und alle Tools kümmerte, also musste ich einen Alias ​​hinzufügen.

Danke, das hat mein Problem gelöst, ich habe ein weiteres React in meinem docs Verzeichnis installiert, das dieses Problem verursacht hat.

Ich nenne Hook nur ganz einfach.

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);

Ich bekomme Fehler
Hooks can only be called inside of the body of a function component.
Ich habe viele Reaktionsprojekte aus Skizzen erstellt, aber ich bekomme diesen Fehler noch nie.
Ich verstehe alle Hook-Regeln.
Ich verbringe eine Zeit für 12 Stunden, um es zu debuggen und zu lösen, aber leider kann ich nicht, Jetzt habe ich keine Ahnung.

// 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

Möglicherweise haben Sie nicht übereinstimmende Versionen von React und React DOM.
Ich hatte das gleiche Problem gelöst, indem ich die React-Version geändert habe

Ich habe dieses Problem, wenn ich versuche, meine Komponente von einer funktionalen zu einer klassenvollen Komponente zu ändern, und ich erhalte auch diesen Fehler. Hier ist meine Lösung für diesen Fehler, ich hoffe, sie hilft auch in Ihrem Fall.

Versuchen Sie in diesem Fall eine Komponente höherer Ordnung zu verwenden

importiere React aus 'react';
Importieren Sie PropTypes von 'prop-types';
import { withStyles } from '@material-ui/styles';
Importieren Sie die Schaltfläche von '@material-ui/core/Button';

const-Stile = Thema => ({
Wurzel: {
Hintergrund: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
Grenze: 0,
GrenzeRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
Farbe weiß',
Höhe: 48,
Auffüllen: '0 30px',
},
});

Klasse HigherOrderComponent erweitert React.Component {

machen(){
const { Klassen } = this.props;
Rückkehr (

HigherOrderComponent.propTypes = {
Klassen: PropTypes.object.isRequired,
};

Exportstandard withStyles(styles)(HigherOrderComponent);

Ich lerne React und FWIW, ich habe das Problem auch beim Versuch gesehen, App() wie folgt zu rendern:

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

Meine Überlegung war, dass <App /> implizit eine Mini-Vorlage erstellen würde, nur um die App-Komponente einzufügen, also habe ich stattdessen einfach App direkt aufgerufen, was die JSX-Vorlage zurückgibt.

Als ich jedoch mit setState () begann, verursachte dies das oben genannte Problem. Der Wechsel zu <App /> behoben.

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

Hinweis: $ ist nur ein Helfer const $ = sel => document.querySelector(sel);

Für diejenigen, die nach der Fehlerbehebung bei allen vorgeschlagenen Fixes immer noch auf diesen Fehler stoßen, überprüfen Sie noch einmal, ob Sie beim Ausführen Ihres Projekts die richtige Verzeichnis-Schreibweise verwenden. Ich hatte weiterhin Probleme mit meinem PC und stellte fest, dass dies der Grund war.

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

Ich habe diesen Fehler beim Ausführen von Test erhalten, nachdem ich react-dom auf Version 16.10.2 aktualisiert hatte. Ein Upgrade von enzyme-adapter-react-16 auf Version 1.15.1 Problem behoben

Oh Mann, ich bin auf Reagieren v16.10.2. Ich habe bereits ein paar Stunden damit verbracht, damit zu kämpfen, aber ich werde diesen Kampf nicht mehr fortsetzen, da ich wichtigere Dinge zu tun habe. Ich bin damit einverstanden, vorerst auf React-Final-Form 4.1.0 zu bleiben. Was für ein Frust.

Das hat mein Problem gelöst:

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

Ich hatte das gleiche Problem gerade nach dem Upgrade der Abhängigkeiten und verbrachte Stunden damit, dies zu klären.

npm ls react zeigte Folgendes:

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

Durch das Anheften von react und react-dom an 16.9.0 wurde der Fehler behoben, da dadurch die vorübergehende Abhängigkeit verschwunden war. Ich dachte zuerst, dass dies eine Regression in 16.10.0 bis ich bemerkte, dass das Problem auch in 16.8.6 (weil die vorübergehende Abhängigkeit anscheinend fixiert war).

Es stellte sich heraus, dass das resolutions Feld von Garn etwas knifflig ist, um richtig zu arbeiten, insbesondere in lerna monorepos, aber das Eliminieren der zweiten Kopie von React hat den Zweck erfüllt. Ich habe immer noch keine Ahnung, wie es überhaupt im Bundle gelandet ist, aber das hat das Problem verursacht.

Ich überlege jetzt, @storybook/addon-info komplett wegzulassen, da es auch auf einer anderen Abhängigkeit beruht, die eine Abhängigkeit von React 0.14 (ja) hat, obwohl diese irgendwie noch keine Probleme verursacht hat.

EDIT: Für das Protokoll habe ich ungefähr vier Stunden damit verbracht, da ich resolutions nicht bekommen konnte, um das Duplikat zu entfernen, und weigerte sich zu glauben, dass eine Kopie von React überhaupt in das Bundle gelangt ist. Sei nicht wie ich. Deduplizieren Sie Ihre vorübergehenden Reaktionen.

Dies passiert, wenn ich Hook in einem HOC verwende.

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

ich stehe auch vor dem gleichen Problem.

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

kannst du mich bitte führen?

@Neeraj-swarnkar Versuchen Sie, Ihr Problem auf ein minimales Beispiel zu reduzieren, das immer noch zum Fehler führt.

Es läuft fast immer auf eines von zwei Problemen hinaus:

• Sie denken, Sie übergeben eine Komponente, aber es ist tatsächlich eine Render-Requisite (dh die "Komponente" wird als Funktion aufgerufen, nicht als Komponente)
• Sie haben irgendwie mehr als eine Version von React über Ihre vorübergehenden Abhängigkeiten gebündelt und sie treten sich gegenseitig auf die Zehen

Leider neigen die Stack-Traces in diesem Fall dazu, irreführend zu sein, aber die Fehlermeldungen geben Ihnen im Allgemeinen die richtige Idee.

@Neeraj-swarnkar Versuchen Sie, Ihr Problem auf ein minimales Beispiel zu reduzieren, das immer noch zum Fehler führt.

Es läuft fast immer auf eines von zwei Problemen hinaus:

• Sie denken, Sie übergeben eine Komponente, aber es ist tatsächlich eine Render-Requisite (dh die "Komponente" wird als Funktion aufgerufen, nicht als Komponente)
• Sie haben irgendwie mehr als eine Version von React über Ihre vorübergehenden Abhängigkeiten gebündelt und sie treten sich gegenseitig auf die Zehen

Leider neigen die Stack-Traces in diesem Fall dazu, irreführend zu sein, aber die Fehlermeldungen geben Ihnen im Allgemeinen die richtige Idee.

Danke für den Hinweis, können Sie mir helfen, was besser gemacht werden könnte oder was ich tun kann, um das zu beheben?

@Neeraj-swarnkar versuchen Sie, Code auszukommentieren und durch Platzhalter zu ersetzen, bis Sie ein minimales Beispiel haben, das immer noch zu demselben Fehler führt.

Wenn Sie keinen Kollegen oder Kollegen haben, können Sie ihn bei der weiteren Fehlersuche unterstützen, suchen Sie nach einem lokalen Treffen, einer Studiengruppe oder einem Unternehmen, das offene Sprechzeiten anbietet, und bitten Sie sie um Hilfe. Wenn alles andere fehlschlägt, beauftragen Sie jemanden, der sich für Sie darum kümmert.

Meine Bibliothek und die create-react-app sind relativ zueinander und ich verwende npm link

Hast du diesen Teil gelesen?

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

Es adressiert direkt den link Workflow:

Diese Arbeit wie ein Zauber!

Meine Bibliothek und die create-react-app sind relativ zueinander und ich verwende npm link

Hast du diesen Teil gelesen?

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

Es adressiert direkt den link Workflow:

Diese Arbeit wie ein Zauber!

Ich habe dieses Problem gestern gelöst, es hat mich einen halben Monat lang gestört. Gestern habe ich den Code auf sehr wenig verkürzt (nur hinzufügen

Ich löse das durch Veränderung

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

zu

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

aber ich weiß nicht warum :(

Bei mir funktioniert es, aber ich weiß auch nicht warum.

Wenn Sie hierher kommen, weil Sie ein HOC + makeStyles von der Material-Benutzeroberfläche verwenden,
hier ist deine Antwort: https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com

Ich löse das durch Veränderung

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

zu

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

aber ich weiß nicht warum :(

Bei mir funktioniert es, aber ich weiß auch nicht warum.

Das Prop "component" erwartet eine React-Komponente, das Prop "render" erwartet eine Funktion, die als Funktion aufgerufen wird. Funktionskomponenten sind Komponenten, deren Aufruf als normale Funktionen nicht funktioniert, wenn sie Hooks verwenden, und im Allgemeinen keine gute Idee ist.

Ich löse das durch Veränderung

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

zu

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

aber ich weiß nicht warum :(

Danke, Liebes, es hat für mich funktioniert, Trotzdem bin ich verwirrt, warum?

@jaisonjjames siehe meine Antwort. Es gibt einige Erklärungen zu StackOverflow, wenn Sie Schwierigkeiten haben, den Unterschied zu verstehen: https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render

In meinem Fall hatte ich let match = useRouteMatch("/user/:id"); außerhalb der Komponente, die ein Hook von React-Router ist, also war der Fehler richtig.

von

zu

von

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

zu

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

In meinem Fall bezog ich mich auf eine Bibliothek aus dem window Objekt, die eine andere React-Version hatte. Am Ende habe ich die Konfigurationsoption externals von Webpack verwendet, die mir geholfen hat, auf die react und react-dom dieser Bibliothek zu verweisen und den Fehler verschwinden zu lassen.

Ich glaube, der Grund für diesen Fehler war, dass You might have more than one copy of React in the same app .

In meinem Fall bezog ich mich auf eine Bibliothek aus dem window Objekt, die eine andere React-Version hatte. Am Ende habe ich die Konfigurationsoption externals von Webpack verwendet, die mir geholfen hat, auf die react und react-dom dieser Bibliothek zu verweisen und den Fehler verschwinden zu lassen.

Ich glaube, der Grund für diesen Fehler war, dass You might have more than one copy of React in the same app .

@AbreezaSaleem Wie hast du das geschafft? Ich habe das gleiche Problem, die Verwendung einer Bibliothek mit react als externe Version wird irgendwie als eine andere Version angezeigt ... Ich habe versucht externals: [ 'react' ] , externals: { react: 'react' } und externals: { react: 'React' } , Ergebnis ist immer gleich...

Ich habe ein etwas minimales Beispiel erstellt, um dies zu reproduzieren. In meinem Fall tritt das Problem auf ElectronJS mit Electron-Webpack und React-Dropzone auf

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

Es gibt eine nette Webpack-Konfigurationslösung, um auf dieselbe / einzelne reagierende Instanz zu verweisen. Es war, eine Auflösung innerhalb der App hinzuzufügen, die das 'to be npm module' verwendet.

Fügen Sie in webpack.config.js einen Alias ​​hinzu, um zu reagieren - also verwendet es diese eine Reaktionsinstanz:

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

lerna kann dieses Problem verursachen, wie ich heute gelernt (lerned?) habe.

lerna-Benutzer, wenn Sie eine Komponentenbibliothek entwickeln, nehmen Sie React nicht in die Abhängigkeiten Ihrer Bibliothek auf, fügen Sie es in Ihre peerDependencies und @types/react in Ihre devDependencies ein.

Für jeden, der lerna verwendet, können Sie auf dieses Problem stoßen, wenn Sie Tests in einem Paket ausführen, bei denen der Code auf Komponenten in einem anderen Paket verweist.

Das Problem, das wir in diesem Fall hatten, war darauf zurückzuführen, dass die Reaktion in die Spezifikation importiert wurde und auch in eine Komponente im Komponentenbaum importiert wurde, die Material UIs withStyles verwendet , die mit Hooks in Material UI implementiert wird.

Es scheint, dass React den Zustand intern in einer ReactCurrentDispatcher.current Variable verwaltet, und dies wird in einer Instanz von React gesetzt, aber in der anderen Instanz von React verwendet – wenn sie leer ist, wirft sie die Invalid hook call ... Nachricht.

Wir haben Craco bereits verwendet, um die Webpack-Konfiguration der Create React App zur Build-Zeit zu überschreiben:

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

Diese Webpack-Überschreibung wird jedoch nur zur Build-Zeit verwendet – beim Ausführen der Tests wird der Code nicht erstellt, sondern aus dem Quellcode instanziiert – daher bestand unsere Lösung darin, CracoAlias in unserem craco.config.js zu verwenden, um dies anzugeben der Reaktionspfad während der Tests:

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