React: Raccrocher non valide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction. Cela peut se produire pour l'une des raisons suivantes :

Je pense que vous êtes confronté au même problème que les personnes de https://github.com/facebook/react/issues/13991 Pourriez-vous jeter un œil à certaines des solutions de contournement présentées tout en bas du problème et les voir travailler pour vous?

Cela se produit si j'utilise un crochet à l'intérieur d'un HOC.

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

@revskill10, veuillez créer un problème séparé avec une reproduction de codesandbox.

Je vous recommanderai d'utiliser https://www.npmjs.com/package/webpack-bundle-analyzer.

Il arrive que nous oubliions souvent de lier react et react-dom à l'application parente dans le cas de bibliothèques qui ajoutent deux builds de react et conduisent à ce problème.

Si c'est le cas, alors npm link react et react-dom vers la version parent de react et react-dom.

Ma bibliothèque et l'application create-react sont relatives et j'utilise le lien npm

As-tu lu cette partie ?

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

Il s'adresse directement au workflow link :

(Faites-moi savoir si cela ne vous aide pas et nous pouvons rouvrir. J'apprécie la rédaction détaillée.)

Merci à tous d'avoir participé

@gaearon J'avais déjà essayé et réessayé de résoudre ce problème selon les recommandations de la page React :

J'ai suivi toutes ces instructions et j'obtiens toujours la même erreur.

@threepointone assez drôle, tant de gens ont trouvé des solutions à ce problème au n°13991 et j'ai passé le reste de la journée d'hier à les mettre en œuvre sans succès.

Ok, si cela ne vous a pas aidé, laissons-le ouvert pour que quelqu'un puisse déboguer votre problème et vous aider. Le problème _est_ le même (la façon dont vous liez les packages les fait dupliquer dans le bundle) mais je ne sais pas pourquoi la suggestion n'a pas fonctionné pour vous.

@gaearon vous pouvez maintenant le fermer, la solution ci-dessus a fonctionné.

Je viens d'appeler crochet d'une manière très très basique.

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

je reçois une erreur
Hooks can only be called inside of the body of a function component.
J'ai créé beaucoup de projets de réaction à partir d'un croquis, mais je n'ai jamais eu cette erreur auparavant.
Je comprends toutes les règles du crochet.
Je passe 12 heures à le déboguer et à le résoudre, mais malheureusement je ne peux pas, maintenant je n'en ai aucune idée.

// 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 avez-vous pu résoudre le problème ?

@carlosriveros
Cas 1:
Vous pourriez vérifier votre index.html qui n'a qu'un seul paquet de balises de script

Si vous obtenez la même erreur après avoir vérifié index.html
Cas 2 :
Si vous utilisez Webpack html, dans la propriété des plugins dans le fichier webpack.config
Et ne pas avoir {reject: true} en option du nouveau HTMLWebpackPlugin();

Vous devez supprimer la balise de script qui src dans votre bundle dans index.html

Parce que HTMLWebpackPlugin ajoutera automatiquement une balise de script qui inclura votre fichier bundle.

Bonjour, je suis nouveau sur React Hooks. Je viens d'utiliser Material-UI pour créer la barre de recherche dans mon projet. J'ai écrit ce code, mais cela ne fonctionne pas et donne le même problème. J'ai lu la documentation de React Hooks mais je n'ai rien obtenu à ce sujet.
CODE REACTJS
```importer React depuis 'react';
importer { makeStyles } depuis '@material-ui/core/styles' ;
importer du papier depuis '@material-ui/core/Paper' ;
importer InputBase depuis '@material-ui/core/InputBase' ;
importer IconButton depuis '@material-ui/core/IconButton' ;
importer SearchIcon de '@material-ui/icons/Search' ;

const useStyles = makeStyles({
racine: {
remplissage : '2px 4px',
afficher : 'flex',
alignItems: 'center',
largeur : 400,
},
saisir: {
margeGauche : 8,
flexible : 1,
},
icôneBouton : {
rembourrage : 10,
},
diviseur : {
largeur : 1,
hauteur: 28,
marge : 4,
},
});

fonction Caractéristique() {
classes const = useStyles();

revenir (





);
}

exporter la fonctionnalité par défaut ;

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

VERSION

• Nœud -- v10.15.3
• Réagir -- ^16.8.5
• Matériel-UI -- ^4.0.1

RÉSULTAT ATTENDU

• CODE VS intégré et _Une barre de recherche_ attendue
  SORTIR
  _TypeError : l'objet (...) n'est pas une fonction_
  _Raccrochage invalide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction. Cela peut se produire pour l'une des raisons suivantes :_

ESSAYER
_Essayez de l'exécuter dans CODESANDBOX , tout fonctionne bien_ Vérifiez-le .

Bonjour, je suis nouveau sur React Hooks. Je viens d'utiliser Material-UI pour créer la barre de recherche dans mon projet. J'ai écrit ce code, mais cela ne fonctionne pas et donne le même problème. J'ai lu la documentation de React Hooks mais je n'ai rien obtenu à ce sujet.
CODE 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;

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

VERSION

• Nœud -- v10.15.3
• Réagir -- ^16.8.5
• Matériel-UI -- ^4.0.1

RÉSULTAT ATTENDU

• CODE VS intégré et _Une barre de recherche_ attendue
  SORTIR
  _TypeError : l'objet (...) n'est pas une fonction_
  _Raccrochage invalide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction. Cela peut se produire pour l'une des raisons suivantes :_

ESSAYER
_Essayez de l'exécuter dans CODESANDBOX , tout fonctionne bien_ Vérifiez-le .

Je rencontre également cette question lors de l'utilisation de material-ui.

@stupidsongshu , alors comment l'avez-vous résolu ?

Bonjour, je suis nouveau sur React Hooks. Je viens d'utiliser Material-UI pour créer la barre de recherche dans mon projet. J'ai écrit ce code, mais cela ne fonctionne pas et donne le même problème. J'ai lu la documentation de React Hooks mais je n'ai rien obtenu à ce sujet.
CODE 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;

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

VERSION

• Nœud -- v10.15.3
• Réagir -- ^16.8.5
• Matériel-UI -- ^4.0.1

RÉSULTAT ATTENDU

• CODE VS intégré et _Une barre de recherche_ attendue
  SORTIR
  _TypeError : l'objet (...) n'est pas une fonction_
  _Raccrochage invalide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction. Cela peut se produire pour l'une des raisons suivantes :_

ESSAYER
_Essayez de l'exécuter dans CODESANDBOX , tout fonctionne bien_ Vérifiez-le .

Cela m'est arrivé aujourd'hui et je viens de lancer npm install --save react -dom@latest

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

J'ai suivi les instructions fournies dans la page d'aide mais cela n'a toujours pas résolu le problème

Pour moi, nous l'avons résolu pour l'instant en passant simplement React comme accessoire. Il s'agit d'une application et de modules séparés sur lesquels nous avons un contrôle total, donc je ne sais pas si cela s'applique à tout le monde.

ça ne m'a pas aidé non plus..
Utilisation de React & React-DOM = 16.8.0 et Material-UI = 4.1.3

J'ai testé toutes les solutions à ce problème de hooks, toute importation d'un composant à partir d'une bibliothèque externe à l'aide de hooks se bloquera car il y a 2 instances de réaction (une de la bibliothèque, une de mon application).

J'ai suivi toutes les suggestions, rien n'a fonctionné jusqu'à présent. Je vais créer un composant avec un état jusqu'à ce qu'il soit clarifié davantage ...

Même problème ici. Nous avons un projet avec deux instances de réaction. Un comme lib et un app qui consomme le lib .

Je résous en supprimant yarn.lock , package-lock.json , node_modules , dist , le type de cache et les fichiers de construction, puis j'exécute yarn ou npm install pour réinstaller les bibliothèques. Maintenant ça marche!

Je résous ça en changeant

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

à

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

mais je ne sais pas pourquoi :(

Corrigé en utilisant un composant au lieu de render par erreur. Le guide officiel n'a pas mentionné ce scénario.
Merci, xyj404
<Route path="/login" exact component={LoginForm} />

J'ai eu le même problème mais la cause était différente. Pour toute personne utilisant des plugins ou des extraits d'importation automatique, assurez-vous d'importer à partir du même cas, réagissez.

Si vous avez un mélange de import {useEffect} from 'react' et import {useEffect} from 'React' vous rencontrerez ce problème.

J'ai aussi ce problème, bien que tout fonctionne bien pour moi dans le livre de contes, mais lorsqu'il est utilisé dans l'application, il donne la même erreur

même problème fonctionne aussi
bien dans le livre de contes, mais l'utilisation de l'application génère cette erreur

Même erreur, je l'obtiens lorsque je lance npm test mais l'application fonctionne bien.
Voici mon package.json , des suggestions ? Je suis vraiment coincé et je perds du temps à gérer cette erreur

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

J'ai également rencontré cette situation en utilisant react et react-dom à la fois v16.8.6, en utilisant le crochet makeStyles de @material-ui/core dans une application séparée liée à l'aide du lien npm.

Après avoir mis à niveau l'application principale pour réagir et réagir-dom v16.9.0, et reconnecter l'application qui utilisait les crochets à l'origine du problème, tout a recommencé à fonctionner.

Oui, j'ai eu le même problème lorsque j'utilise @material-ui. Il faut plus de temps pour résoudre ce problème. Ensuite, j'ai cherché sur google et j'ai trouvé une solution pour cela. C'est ici http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-function-component/

Message d'origine :

Lorsque vous parcourez quelques exemples d'écriture de code Material UI dans React et d'utilisation de TypeScript (dans un fichier .tsx pour être précis), vous pouvez rencontrer une erreur au moment de l'exécution telle que « Appel de crochet non valide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction ».

Voici un exemple du code qui provoque cette erreur

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

Ce que nous devons faire, c'est envelopper le code useStyles dans une fonction et remplacer le code qui l'utilise, donc par exemple

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

Cela montre également comment nous pouvons créer des composants réutilisables à partir d'une simple fonction.

=> C'est fou mais ça marche bien. J'espère que cela peut aider.

Si vous utilisez lerna ou un monorepo comme moi, ajoutez qc comme celui-ci à votre configuration de résolution Webpack

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

Si vous l'obtenez dans Storybook, ajoutez-le également à la configuration Webpack personnalisée.

Une note de côté, si cela résout le problème pour vous, votre bundle construit par webpack contenait également 2 versions de réagir (utilisez qc comme analyseur de bundle webpack pour l'inspecter). Dans mon cas, j'avais un package séparé dans mon monorepo qui s'occupait du regroupement et de tout l'outillage, j'ai donc dû ajouter un alias.

Si vous utilisez lerna ou un monorepo comme moi, ajoutez qc comme celui-ci à votre configuration de résolution Webpack

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

Si vous l'obtenez dans Storybook, ajoutez-le également à la configuration Webpack personnalisée.

Une note de côté, si cela résout le problème pour vous, votre bundle construit par webpack contenait également 2 versions de réagir (utilisez qc comme analyseur de bundle webpack pour l'inspecter). Dans mon cas, j'avais un package séparé dans mon monorepo qui s'occupait du regroupement et de tout l'outillage, j'ai donc dû ajouter un alias.

Merci, cela a résolu mon problème, j'ai installé un autre React dans mon répertoire docs , ce qui a causé ce problème.

Je viens d'appeler crochet d'une manière très très basique.

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

je reçois une erreur
Hooks can only be called inside of the body of a function component.
J'ai créé beaucoup de projets de réaction à partir d'un croquis, mais je n'ai jamais eu cette erreur auparavant.
Je comprends toutes les règles du crochet.
Je passe 12 heures à le déboguer et à le résoudre, mais malheureusement je ne peux pas, maintenant je n'en ai aucune idée.

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

Vous pouvez avoir des versions incompatibles de React et React DOM.
J'ai eu le même problème résolu en modifiant la version de React

J'ai fait face à ce problème lorsque j'essaie de changer mon composant de composant fonctionnel à composant complet et j'obtiens également cette erreur, voici donc ma solution concernant cette erreur, j'espère que cela vous aidera également dans votre cas.

essayez d'utiliser un composant d'ordre supérieur dans ce cas

importer React à partir de « react » ;
importer les PropTypes de 'prop-types' ;
importer { withStyles } depuis '@material-ui/styles' ;
importer le bouton de '@material-ui/core/Button' ;

const styles = thème => ({
racine: {
arrière-plan : 'linéaire-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
bordure : 0,
frontièreRayon : 3,
boxShadow : '0 3px 5px 2px rgba (255, 105, 135, .3)',
Couleur blanche',
hauteur: 48,
remplissage : '0 30px',
},
});

la classe HigherOrderComponent étend React.Component {

rendre(){
const { classes } = this.props;
revenir (

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

export par défaut withStyles(styles)(HigherOrderComponent);

J'apprends React et FWIW, j'ai également vu le problème en essayant de rendre App() comme ceci :

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

Mon raisonnement était que <App /> créerait implicitement un mini modèle juste pour insérer le composant App, donc à la place j'ai juste appelé App directement, qui renvoie le modèle JSX.

Cependant, une fois que j'ai commencé à utiliser setState(), cela a causé le problème susmentionné. Le passage à <App /> résolu ce problème.

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

remarque : $ n'est qu'une aide const $ = sel => document.querySelector(sel);

Pour ceux qui rencontrent toujours cette erreur après avoir dépanné tous les correctifs proposés, vérifiez que vous utilisez la bonne casse du répertoire lors de l'exécution de votre projet. J'ai continué à avoir des problèmes sur mon PC et j'ai découvert que c'était la raison pour laquelle.

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

J'obtenais cette erreur lors de l'exécution du test après la mise react-dom jour de 16.10.2 . La mise enzyme-adapter-react-16 niveau de 1.15.1 corrigé

Oh mec, je suis sur réagir v16.10.2. J'ai déjà passé quelques heures à essayer de lutter contre ça, mais je ne continuerai plus cette bataille car j'ai des choses plus importantes à faire. Je suis d'accord pour rester sur react-final-form 4.1.0 pour le moment. Quelle frustration.

Cela a résolu mon problème :

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

J'ai eu le même problème tout à l'heure après la mise à niveau des dépendances et j'ai passé des heures à essayer de résoudre ce problème.

npm ls react montré ce qui suit :

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

Épingler react et react-dom à 16.9.0 fait disparaître l'erreur car elle a fait disparaître la dépendance transitoire. J'ai d'abord pensé que cela signifiait qu'il y avait une régression dans 16.10.0 jusqu'à ce que je remarque que le problème se produisait également dans 16.8.6 (car la dépendance transitoire était apparemment épinglée).

Il s'avère que le champ resolutions fil est un peu difficile à mettre en œuvre, en particulier dans lerna monorepos, mais l'élimination de la deuxième copie de React a fait l'affaire. Je n'ai toujours aucune idée de comment il s'est même retrouvé dans le bundle, mais c'est ce qui a causé le problème.

J'envisage maintenant de supprimer complètement @storybook/addon-info car il repose également sur une autre dépendance qui a une dépendance sur React 0.14 (oui), bien que celle-ci n'ait pas encore causé de problèmes.

EDIT: Pour mémoire, j'ai passé environ quatre heures là-dessus car je ne pouvais pas obtenir resolutions pour éliminer le doublon et j'ai refusé de croire que la copie de React soit même entrée dans le bundle. Ne fais pas comme moi. Dédupliquez vos Reacts transitoires.

Cela se produit si j'utilise un crochet à l'intérieur d'un HOC.

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

Je suis également confronté au même problème.

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

pouvez-vous me guider s'il vous plait ?

@Neeraj-swarnkar Essayez de réduire votre problème à un exemple minimal qui entraîne toujours l'erreur.

Cela se résume presque toujours à l'un des deux problèmes suivants :

• vous pensez que vous passez un composant mais c'est en fait un accessoire de rendu (c'est-à-dire que le "composant" est appelé en tant que fonction, pas en tant que composant)
• vous avez en quelque sorte regroupé plus d'une version de React via vos dépendances transitoires et ils se marchent sur les pieds les uns des autres

Malheureusement, les traces de la pile ont tendance à être trompeuses dans ce cas, mais les messages d'erreur vous donnent généralement la bonne idée.

@Neeraj-swarnkar Essayez de réduire votre problème à un exemple minimal qui entraîne toujours l'erreur.

Cela se résume presque toujours à l'un des deux problèmes suivants :

• vous pensez que vous passez un composant mais c'est en fait un accessoire de rendu (c'est-à-dire que le "composant" est appelé en tant que fonction, pas en tant que composant)
• vous avez en quelque sorte regroupé plus d'une version de React via vos dépendances transitoires et ils se marchent sur les pieds les uns des autres

Malheureusement, les traces de la pile ont tendance à être trompeuses dans ce cas, mais les messages d'erreur vous donnent généralement la bonne idée.

Merci pour le pointeur, pouvez-vous me guider ce qui pourrait être fait mieux ou que dois-je faire pour résoudre ce problème ?

@Neeraj-swarnkar essayez de commenter le code et de le remplacer par des espaces réservés jusqu'à ce que vous ayez un exemple minimal qui entraîne toujours la même erreur.

Si vous n'avez pas de collègue ou de pair, vous pouvez demander de vous aider à déboguer davantage, voyez si vous pouvez trouver une réunion locale, un groupe d'étude ou une entreprise qui ouvre les heures de bureau et demandez-leur de l'aide. Si tout le reste échoue, engagez quelqu'un pour l'examiner pour vous.

Ma bibliothèque et l'application create-react sont relatives et j'utilise le lien npm

As-tu lu cette partie ?

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

Il s'adresse directement au workflow link :

Ce travail comme un charme!

Ma bibliothèque et l'application create-react sont relatives et j'utilise le lien npm

As-tu lu cette partie ?

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

Il s'adresse directement au workflow link :

Ce travail comme un charme!

J'ai résolu ce problème hier, cela m'a dérangé pendant un demi-mois. Hier j'ai raccourci le code à très peu (il suffit d'ajouter

Je résous ça en changeant

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

à

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

mais je ne sais pas pourquoi :(

Cela fonctionne pour moi, mais je ne sais pas pourquoi non plus.

Si vous venez ici parce que vous utilisez un HOC + makeStyles de Material UI,
voici votre réponse : https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-function-com

Je résous ça en changeant

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

à

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

mais je ne sais pas pourquoi :(

Cela fonctionne pour moi, mais je ne sais pas pourquoi non plus.

La prop "component" attend un composant React, la prop "render" attend une fonction qui sera invoquée en tant que fonction. Les composants de fonction sont des composants, les invoquer en tant que fonctions normales ne fonctionne pas s'ils utilisent des hooks et n'est généralement pas une bonne idée.

Je résous ça en changeant

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

à

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

mais je ne sais pas pourquoi :(

Merci, cher, Cela a fonctionné pour moi, Pourtant, je suis confus, pourquoi?

@jaisonjjames voir ma réponse. Il y a quelques explications sur StackOverflow si vous avez du mal à comprendre la différence : https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render

Dans mon cas, j'avais let match = useRouteMatch("/user/:id"); dehors du composant, qui est un crochet de react-router, donc l'erreur était bonne.

de

à

de

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

à

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

Dans mon cas, je faisais référence à une bibliothèque de l'objet window qui avait une version différente de React. J'ai fini par utiliser l'option de configuration externals de webpack qui m'a aidé à me référer aux react et react-dom de cette bibliothèque et a fait disparaître l'erreur.

Je pense donc que la raison pour laquelle j'ai eu cette erreur était que You might have more than one copy of React in the same app .

Dans mon cas, je faisais référence à une bibliothèque de l'objet window qui avait une version différente de React. J'ai fini par utiliser l'option de configuration externals de webpack qui m'a aidé à me référer aux react et react-dom de cette bibliothèque et a fait disparaître l'erreur.

Je pense donc que la raison pour laquelle j'ai eu cette erreur était que You might have more than one copy of React in the same app .

@AbreezaSaleem Comment avez-vous accompli cela ? J'ai le même problème, utiliser une bibliothèque qui a react en tant qu'externe s'affiche en quelque sorte comme une version différente... J'ai essayé externals: [ 'react' ] , externals: { react: 'react' } et externals: { react: 'React' } , le résultat est toujours le même...

J'ai créé un exemple un peu minimal pour reproduire cela. Dans mon cas, le problème se produit sur ElectronJS avec electron-webpack et react-dropzone

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

il existe une bonne solution de configuration de webpack pour pointer vers la même instance de réaction unique. Il s'agissait d'ajouter une résolution à l'intérieur de l'application qui utilise le « module to be npm ».

dans webpack.config.js, ajoutez un alias pour réagir - il utilise donc cette instance de réaction :

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

lerna peut causer ce problème, comme je l'ai appris (appris ?) aujourd'hui.

Utilisateurs de lerna, si vous développez une bibliothèque de composants, n'incluez pas react dans les dépendances de votre bibliothèque, placez-le dans vos peerDependencies et @types/react dans vos devDependencies.

Pour toute personne utilisant lerna, vous pouvez rencontrer ce problème lors de l'exécution de tests dans un package, où le code fait référence à des composants dans un autre package.

Le problème que nous avons rencontré dans ce cas était dû à l'importation de la réaction dans la spécification, ainsi qu'à l'importation dans un composant de l'arborescence des composants qui utilisait l' interface utilisateur

Il semble que react gère en interne l'état dans une variable ReactCurrentDispatcher.current , et cela finit par être défini dans une instance de react, mais utilisé dans l'autre instance de react -- quand il est vide, il lance le Invalid hook call ... message.

Nous utilisions déjà Craco pour remplacer la configuration du pack Web de Create React App au moment de la construction :

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

Cependant, ce remplacement de webpack n'est utilisé qu'au moment de la construction -- lors de l'exécution des tests, le code n'est pas construit, mais instancié à partir de la source -- donc notre solution était d'utiliser CracoAlias dans notre craco.config.js pour spécifier le chemin de réaction pendant les 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',
        },
      },
    },
  ],