React: Chamada de gancho inválida. Os ganchos só podem ser chamados dentro do corpo de um componente de função. Isso pode acontecer por um dos seguintes motivos:

Criado em 4 abr. 2019  ·  61Comentários  ·  Fonte: facebook/react

Oi pessoal Eu sou novo para reagir e estou tentando criar uma biblioteca react de componentes e me deparei com este problema porque um dos componentes que estou criando usa REACT HOOKS .

Isenção de responsabilidade: esta é a primeira vez que estou criando um problema, então, por favor, tenha paciência comigo.

Portanto, estou tentando criar um componente de acordeão que alterna entre essas classes accordion__item--open e accordion__item para abrir e fechar.

package.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"
  }
}

webpack.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']
        }
      }
    ]
  } 
};

Este é o contêiner de acordeão:

`` `
import React from 'react';

função Acordeão ({crianças}) {

Retorna (


{ crianças }

);

}

exportar acordeão padrão;

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

import React, {useState} de 'react';

function AccordionItem ({header, content}) {

const [isActive, toggleActive] = useState (false);

Retorna (

Accordeion__item $ {isActive? 'Accordeion__item - aberto': ''}}>
  <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>


)

};

exportar AccordionItem padrão;

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

import React from 'react';

importar {AccordionItem} de 'react-lib'
import {Accordion} de 'react-lib';

function App ({props}) {

Retorna (

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

)

}

exportar aplicativo padrão;

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?**

Chamada de gancho inválida. Os ganchos só podem ser chamados dentro do corpo de um componente de função. Isso pode acontecer por um dos seguintes motivos:

  1. Você pode ter versões incompatíveis do React e do renderizador (como React DOM)
  2. Você pode estar quebrando as regras dos ganchos
  3. Você pode ter mais de uma cópia do React no mesmo aplicativo
    Consulte https://fb.me/react-invalid-hook-call para dicas sobre como depurar e corrigir esse problema.
**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```

importar acordeão de './Acordeão';
importar AccordionItem de './AccordionItem';

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

import {Accordion} de 'react-lib';
importar {AccordionItem} de 'react-lib';
`` `

As versões do React, navegador / sistema operacional são afetadas por este problema:

  • React e React-Dom: ambos são ^16.8.6 no react-lib e no myapp
  • Navegador: Brave Version 0.61.52 Chromium: 73.0.3683.86 (Official Build) (64-bit)
  • SO: MacOS High Siera Version 10.13.6 (17G5019)
Needs Investigation
Fonte
picture sethandleah
👍56 ❤2

Comentários muito úteis

Minha biblioteca e o create-react-app são relativos um ao outro e estou usando o link npm

Você leu esta parte?

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

Ele aborda diretamente o fluxo de trabalho link :

Screen Shot 2019-04-04 at 09 28 47

picture gaearon em 4 abr. 2019
👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

Todos 61 comentários

Acho que você está enfrentando o mesmo problema que o pessoal em https://github.com/facebook/react/issues/13991 Você poderia dar uma olhada em algumas das soluções alternativas apresentadas na parte inferior do problema e ver como elas Trabalho para você?

threepointone picture threepointone em 4 abr. 2019
👍1

Isso acontece se eu usar o gancho dentro de um HOC.

const HOC = Component => {
  return (props) => {
    const [val] = useState();
    return <div>{val}</div>
  }
}
revskill10 picture revskill10 em 4 abr. 2019
👍62 ❤4 🎉1

@ revskill10 faça um problema separado com um codesandbox repro.

threepointone picture threepointone em 4 abr. 2019

Vou recomendar que você use https://www.npmjs.com/package/webpack-bundle-analyzer.

Acontece que muitas vezes esquecemos de vincular o react e o react-dom ao aplicativo pai no caso de bibliotecas que adicionam dois builds do react e levam a esse problema.

Se for esse o caso, então apenas o link npm reage e reage à versão pai de react e react-dom.

iAmServerless picture iAmServerless em 4 abr. 2019

Minha biblioteca e o create-react-app são relativos um ao outro e estou usando o link npm

Você leu esta parte?

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

Ele aborda diretamente o fluxo de trabalho link :

Screen Shot 2019-04-04 at 09 28 47

gaearon picture gaearon em 4 abr. 2019
👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

(Avise-me se isso não ajudar e podemos reabrir. Agradeço a descrição detalhada.)

gaearon picture gaearon em 4 abr. 2019

Obrigado a todos por contribuírem

@gaearon Eu já tentei e tentei resolver isso de acordo com as recomendações da página React:

Eu segui todas essas instruções e ainda recebo o mesmo erro.

@threepointone é engraçado o suficiente, muitas pessoas encontraram soluções para isso em # 13991 e passei o resto do dia de ontem implementando-as sem sucesso.

sethandleah picture sethandleah em 5 abr. 2019

Ok, se isso não ajudou, vamos deixá-lo aberto para que alguém possa depurar seu problema e ajudá-lo. O problema _é_ o mesmo (a maneira como você vincula os pacotes faz com que eles sejam duplicados no pacote), mas não tenho certeza de por que a sugestão não funcionou para você.

gaearon picture gaearon em 5 abr. 2019

@gaearon agora você pode fechá-lo, a solução acima funcionou.

sethandleah picture sethandleah em 7 abr. 2019

Eu apenas chamo de gancho de uma maneira muito básica.

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

Eu recebo erro
Hooks can only be called inside of the body of a function component.
Eu criei muitos projetos de reação a partir do esboço, mas nunca recebi esse erro antes.
Eu entendo todas as regras do gancho.
Gastei um tempo de 12 horas para depurar e resolver, mas infelizmente não consigo, agora não tenho ideia.

// 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 picture worapolburaphan em 8 mai. 2019
👍20 ❤1

@xeastcrast você conseguiu resolver o problema?

carlosriveros picture carlosriveros em 29 mai. 2019

@carlosriveros
Caso 1:
Você pode verificar seu index.html que tem apenas um pacote de tag de script

Se você obtiver o mesmo erro após verificar index.html
Caso 2:
Se você usar Webpack html, In plugins propriedade dentro do arquivo webpack.config
E não tem {rejeitar: verdadeiro} na opção de novo HTMLWebpackPlugin ();

Você deve remover a tag de script que pertence ao seu pacote em index.html

Porque HTMLWebpackPlugin adicionará tag de script que inclui seu arquivo de pacote automaticamente.

worapolburaphan picture worapolburaphan em 30 mai. 2019
👍13 ❤6 🎉6 🚀4 😄4

Olá, sou novo no React Hooks. Acabei de usar o Material-UI para criar a barra de pesquisa em meu projeto. Eu escrevi esse código, mas isso não está funcionando e dando o mesmo problema. Eu li a documentação do React Hooks, mas não recebi nada a respeito.
CÓDIGO REAGIR
`` `import React de 'react';
importar {makeStyles} de '@ material-ui / core / styles';
importar papel de '@ material-ui / core / Paper';
importar InputBase de '@ material-ui / core / InputBase';
import IconButton de '@ material-ui / core / IconButton';
importar SearchIcon de '@ material-ui / icons / Search';

const useStyles = makeStyles ({
raiz: {
preenchimento: '2px 4px',
display: 'flex',
alignItems: 'center',
largura: 400,
},
entrada: {
marginLeft: 8,
flex: 1,
},
iconButton: {
preenchimento: 10,
},
divider: {
largura: 1,
altura: 28,
margem: 4,
},
});

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

Retorna (





);
}

Exportar Recurso padrão;

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

VERSÃO

  • Nó - v10.15.3
  • Reagir - ^ 16.8.5
  • Material-UI - ^ 4.0.1

RESULTADO ESPERADO

  • CÓDIGO VS integrado e _A barra de pesquisa esperada_
    SAÍDA
    _TypeError: Object (...) não é uma função_
    _Chamada de gancho inválida. Os ganchos só podem ser chamados dentro do corpo de um componente de função. Isso pode acontecer por um dos seguintes motivos: _

EXPERIMENTE
_Tente rodar no CODESANDBOX , tudo funciona bem_ Verifique .

B4BIPIN picture B4BIPIN em 2 jun. 2019
👍3

Olá, sou novo no React Hooks. Acabei de usar o Material-UI para criar a barra de pesquisa em meu projeto. Eu escrevi esse código, mas isso não está funcionando e dando o mesmo problema. Eu li a documentação do React Hooks, mas não recebi nada a respeito.
CÓDIGO REAGIR

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

VERSÃO

  • Nó - v10.15.3
  • Reagir - ^ 16.8.5
  • Material-UI - ^ 4.0.1

RESULTADO ESPERADO

  • CÓDIGO VS integrado e _A barra de pesquisa esperada_
    SAÍDA
    _TypeError: Object (...) não é uma função_
    _Chamada de gancho inválida. Os ganchos só podem ser chamados dentro do corpo de um componente de função. Isso pode acontecer por um dos seguintes motivos: _

EXPERIMENTE
_Tente rodar no CODESANDBOX , tudo funciona bem_ Verifique .

Eu também encontro essa questão ao usar o material-ui.

stupidsongshu picture stupidsongshu em 3 jun. 2019

@stupidsongshu , então como você resolveu isso?

B4BIPIN picture B4BIPIN em 7 jun. 2019

Olá, sou novo no React Hooks. Acabei de usar o Material-UI para criar a barra de pesquisa em meu projeto. Eu escrevi esse código, mas isso não está funcionando e dando o mesmo problema. Eu li a documentação do React Hooks, mas não recebi nada a respeito.
CÓDIGO REAGIR

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

VERSÃO

  • Nó - v10.15.3
  • Reagir - ^ 16.8.5
  • Material-UI - ^ 4.0.1

RESULTADO ESPERADO

  • CÓDIGO VS integrado e _A barra de pesquisa esperada_
    SAÍDA
    _TypeError: Object (...) não é uma função_
    _Chamada de gancho inválida. Os ganchos só podem ser chamados dentro do corpo de um componente de função. Isso pode acontecer por um dos seguintes motivos: _

EXPERIMENTE
_Tente rodar no CODESANDBOX , tudo funciona bem_ Verifique .

Isso aconteceu comigo hoje e acabei de executar npm install --save react -dom @ latest

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

vcibel picture vcibel em 7 jun. 2019
❤1

Segui as instruções fornecidas na página de ajuda, mas ainda não resolveu o problema

miguelmota picture miguelmota em 12 jun. 2019
👍2

Para mim, resolvemos isso por enquanto simplesmente passando o React como um adereço. Este é um aplicativo e módulos separados sobre os quais temos total controle, então não sei se se aplica a todos.

mikeaustin picture mikeaustin em 22 jun. 2019

Não me ajudou muito ..
Usando React & React-DOM = 16.8.0 e Material-UI = 4.1.3

Barathwaja picture Barathwaja em 26 jun. 2019

Tenho testado todas as soluções sobre este problema de ganchos, qualquer importação de um componente de uma biblioteca externa usando ganchos irá travar, pois há 2 instâncias de reação (uma da lib, uma do meu aplicativo).

Segui todas as sugestões, nada deu certo até agora. Vou fazer um componente com um estado até ficar mais esclarecido ...

tquiroga picture tquiroga em 3 jul. 2019
😕4

Mesmo problema aqui. Temos um projeto com duas instâncias de reação. Um como lib e um app que está consumindo lib .

dude-awesome picture dude-awesome em 10 jul. 2019

Eu resolvo removendo yarn.lock , package-lock.json , node_modules , dist , tipo de cache e arquivos de compilação e, em seguida, executo yarn ou npm install para instalar bibliotecas novamente. Agora funciona!

gtgalone picture gtgalone em 10 jul. 2019
👍3

Eu resolvo isso mudando

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

para

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

mas não sei porque :(

xyj404 picture xyj404 em 12 jul. 2019
👍24 🎉10 ❤7

Corrigido usando componente em vez de renderizar por engano. O guia oficial não mencionou este cenário.
Obrigado, xyj404
<Route path="/login" exact component={LoginForm} />

MikeQin picture MikeQin em 30 jul. 2019
👍10

Eu tive o mesmo problema, mas a causa era diferente. Para qualquer pessoa que use plug-ins ou snippets de importação automática, certifique-se de importar do mesmo caso.

Se você tiver uma mistura de import {useEffect} from 'react' e import {useEffect} from 'React' você terá esse problema.

raza-jamil-harvest picture raza-jamil-harvest em 16 ago. 2019
🎉1 👍1

Eu também tenho esse problema, embora tudo funcione bem para mim no livro de histórias, mas quando usado no aplicativo dá o mesmo erro

AnimeManna picture AnimeManna em 16 ago. 2019

mesmo problema também funciona
bem no livro de histórias, mas usar o aplicativo gera este erro

hugo-integrate picture hugo-integrate em 16 ago. 2019

Mesmo erro, recebo quando executo npm test mas o aplicativo funciona bem.
Aqui está meu package.json , alguma sugestão? Estou realmente preso e perdendo tempo lidando com esse erro

{
  "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 picture simonepizzamiglio em 20 ago. 2019

Também se deparou com essa situação usando react e react-dom ambos v16.8.6, usando o gancho makeStyles de @material-ui/core em um aplicativo separado vinculado usando um link npm.

Depois de atualizar o aplicativo principal para react and react-dom v16.9.0 e revincular o aplicativo que estava usando os ganchos que causavam o problema, tudo começou a funcionar novamente.

pmjonesg picture pmjonesg em 22 ago. 2019

Sim, tive o mesmo problema quando uso @material-ui. Leva mais tempo para descobrir esse problema. Então eu pesquisei no google e encontrei uma solução para isso. Está aqui http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component/

Postagem original:

Ao examinar alguns exemplos de gravação de código de IU de material dentro do React e usando TypeScript (dentro de um arquivo .tsx para ser mais preciso), você pode encontrar um erro em tempo de execução, como “Chamada de gancho inválida. Os ganchos só podem ser chamados dentro do corpo de um componente de função ”.

Aqui está um exemplo do código que causa este erro

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

O que precisamos fazer é envolver o código useStyles em uma função e substituir o código que o usa, por exemplo

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

Isso também mostra como podemos criar componentes reutilizáveis ​​a partir de apenas uma função simples.

=> É uma loucura, mas está funcionando bem. Espero que isso possa ajudar.

bachphuc picture bachphuc em 23 ago. 2019
👍3

Se você estiver usando lerna ou um monorepo como eu, adicione sth como este à configuração de resolução do seu Webpack

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

Se você estiver obtendo no Storybook, adicione-o à configuração do Webpack personalizado lá também.

Uma nota lateral, se isso corrigir o problema para você, seu bundle construído com webpack também tinha 2 versões do react nele (use sth como o analisador de bundle do webpack para inspecioná-lo). No meu caso, eu tinha um pacote separado no meu monorepo que cuidava do empacotamento e de todas as ferramentas, então tive que adicionar um alias.

sourcesoft picture sourcesoft em 23 ago. 2019
👍2

Se você estiver usando lerna ou um monorepo como eu, adicione sth como este à configuração de resolução do seu Webpack

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

Se você estiver obtendo no Storybook, adicione-o à configuração do Webpack personalizado lá também.

Uma nota lateral, se isso corrigir o problema para você, seu bundle construído com webpack também tinha 2 versões do react nele (use sth como o analisador de bundle do webpack para inspecioná-lo). No meu caso, eu tinha um pacote separado no meu monorepo que cuidava do empacotamento e de todas as ferramentas, então tive que adicionar um alias.

Obrigado, isso resolveu meu problema, instalei outro React no meu ditado docs , que causou este problema.

mysteryven picture mysteryven em 3 set. 2019

Eu apenas chamo de gancho de uma maneira muito básica.

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

Eu recebo erro
Hooks can only be called inside of the body of a function component.
Eu criei muitos projetos de reação a partir do esboço, mas nunca recebi esse erro antes.
Eu entendo todas as regras do gancho.
Gastei um tempo de 12 horas para depurar e resolver, mas infelizmente não consigo, agora não tenho ideia.

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

Você pode ter versões incompatíveis do React e do React DOM.
O mesmo problema foi resolvido ao fazer alterações na versão do React

jafartke picture jafartke em 11 set. 2019
👎3

Eu enfrento esse problema quando tento mudar meu componente de funcional para classfull e também recebo esse erro, então aqui está minha solução em relação a esse erro, espero que ajude no seu caso também.

tente usar um componente de ordem superior neste caso

import React from 'react';
importar PropTypes de 'prop-types';
importar {withStyles} de '@ material-ui / styles';
importar botão de '@ material-ui / core / Button';

estilos const = tema => ({
raiz: {
fundo: 'gradiente linear (45deg, # FE6B8B 30%, # FF8E53 90%)',
fronteira: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba (255, 105, 135, .3)',
cor branca',
altura: 48,
preenchimento: '0 30px',
},
});

class HigherOrderComponent extends React.Component {

render () {
const {classes} = this.props;
Retorna (

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

exportação padrão com estilos (estilos) (HigherOrderComponent);

abdulmoizshaikh picture abdulmoizshaikh em 20 set. 2019

Estou aprendendo React e FWIW, também vi o problema ao tentar renderizar App () assim:

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

Meu raciocínio era que <App /> criaria implicitamente um mini modelo apenas para inserir o componente App, então, em vez disso, chamei o App diretamente, que retorna o modelo JSX.

No entanto, depois que comecei a usar setState (), ele causou o problema mencionado. Mudar para <App /> resolveu isso.

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

nota: $ é apenas um ajudante const $ = sel => document.querySelector(sel);

fabd picture fabd em 9 out. 2019

Para aqueles que ainda estão encontrando esse erro após solucionar todas as correções propostas, verifique novamente se você está usando a caixa de diretório correta ao executar seu projeto. Continuei a ter problemas no meu PC e descobri que era esse o motivo.

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

dbeaudway picture dbeaudway em 13 out. 2019

Eu estava recebendo aquele erro ao executar o teste após atualizar react-dom para a versão 16.10.2 . Atualizar enzyme-adapter-react-16 para a versão 1.15.1 corrigiu isso

joselcc picture joselcc em 17 out. 2019

Oh cara, estou reagindo v16.10.2. Já passei algumas horas tentando lutar contra isso, mas não vou continuar essa batalha, pois tenho coisas mais importantes para fazer. Estou bem em permanecer no react-final-form 4.1.0 por agora. Que frustração.

rockneverdies55 picture rockneverdies55 em 18 out. 2019

Isso resolveu meu problema:

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

DanielAllt picture DanielAllt em 6 nov. 2019

Tive o mesmo problema agora, depois de atualizar as dependências e passei horas tentando resolver isso.

npm ls react mostrou o seguinte:

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

Fixar react e react-dom em 16.9.0 eliminou o erro porque eliminou a dependência transitória. A princípio pensei que isso significava que havia uma regressão em 16.10.0 até que percebi que o problema também ocorria em 16.8.6 (porque a dependência transitória foi aparentemente fixada).

Acontece que o campo resolutions do yarn é um pouco meticuloso para começar a funcionar direito, especialmente em lerna monorepos, mas eliminar a segunda cópia do React resolveu o problema. Ainda não tenho ideia de como acabou no pacote, mas foi isso que causou o problema.

Agora estou pensando em descartar @storybook/addon-info completamente, pois também depende de outra dependência que tem uma dependência do React 0.14 (sim), embora essa de alguma forma ainda não tenha causado problemas.

EDIT: Só para constar, gastei cerca de quatro horas nisso, pois não consegui resolutions para eliminar a duplicata e me recusei a acreditar que a cópia do React tenha entrado no pacote. Não seja como eu. Elimine a duplicação de seus Reacts temporários.

pluma picture pluma em 19 nov. 2019

Isso acontece se eu usar o gancho dentro de um HOC.

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

Eu também estou enfrentando o mesmo problema.

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

Você pode me guiar, por favor ?

Neeraj-swarnkar picture Neeraj-swarnkar em 4 dez. 2019
👍5

@ Neeraj-swarnkar Tente reduzir seu problema a um exemplo mínimo que ainda resulte em erro.

Quase sempre se resume a um de dois problemas:

  • você acha que está passando um componente, mas na verdade é um objeto de renderização (ou seja, o "componente" está sendo chamado como uma função, não como um componente)
  • você de alguma forma agrupou mais de uma versão do React por meio de suas dependências temporárias e elas pisam no dedo do outro

Infelizmente, os rastreamentos de pilha tendem a ser enganosos nesse caso, mas as mensagens de erro geralmente dão a idéia certa.

pluma picture pluma em 4 dez. 2019

@ Neeraj-swarnkar Tente reduzir seu problema a um exemplo mínimo que ainda resulte em erro.

Quase sempre se resume a um de dois problemas:

  • você acha que está passando um componente, mas na verdade é um objeto de renderização (ou seja, o "componente" está sendo chamado como uma função, não como um componente)
  • você de alguma forma agrupou mais de uma versão do React por meio de suas dependências temporárias e elas pisam no dedo do outro

Infelizmente, os rastreamentos de pilha tendem a ser enganosos nesse caso, mas as mensagens de erro geralmente dão a idéia certa.

Obrigado pelo ponteiro, você pode me orientar o que poderia ser feito melhor ou o que devo fazer para corrigir isso?

Neeraj-swarnkar picture Neeraj-swarnkar em 4 dez. 2019

@ Neeraj-swarnkar tente comentar o código e substituí-lo por espaços reservados até que você tenha um exemplo mínimo que ainda resulte no mesmo erro.

Se você não tem um colega ou colega, pode pedir para ajudá-lo a depurar isso ainda mais, veja se consegue encontrar um encontro local, grupo de estudos ou uma empresa que abra horas de expediente e peça ajuda. Se tudo mais falhar, contrate alguém para investigar isso para você.

pluma picture pluma em 6 dez. 2019

Minha biblioteca e o create-react-app são relativos um ao outro e estou usando o link npm

Você leu esta parte?

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

Ele aborda diretamente o fluxo de trabalho link :

Screen Shot 2019-04-04 at 09 28 47

Isso funciona como um encanto!

ladifire picture ladifire em 30 dez. 2019

Minha biblioteca e o create-react-app são relativos um ao outro e estou usando o link npm

Você leu esta parte?

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

Ele aborda diretamente o fluxo de trabalho link :

Screen Shot 2019-04-04 at 09 28 47

Isso funciona como um encanto!

ladifire picture ladifire em 30 dez. 2019

Eu resolvi esse problema ontem, ele me incomodou por meio mês. Ontem abrevi o código para muito pouco (basta adicionar

ZeldaYuan picture ZeldaYuan em 14 jan. 2020

Eu resolvo isso mudando

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

para

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

mas não sei porque :(

Funciona para mim, mas também não sei por quê.

qtwwyl picture qtwwyl em 15 jan. 2020

Se você está vindo aqui porque está usando um HOC + makeStyles do Material UI,
aqui está sua resposta: https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com

benlinton picture benlinton em 29 jan. 2020

Eu resolvo isso mudando

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

para

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

mas não sei porque :(

Funciona para mim, mas também não sei por quê.

O prop "componente" espera um componente React, o prop "render" espera uma função que será chamada como uma função. Os componentes de função são componentes, invocá-los como funções normais não funciona se eles usarem ganchos e geralmente não é uma boa ideia.

pluma picture pluma em 30 jan. 2020

Eu resolvo isso mudando

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

para

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

mas não sei porque :(

Obrigado, querido, funcionou para mim, mesmo assim, estou confuso, por quê?

jaisonjjames picture jaisonjjames em 17 fev. 2020

@jaisonjjames veja minha resposta. Existem algumas explicações sobre StackOverflow se você tiver dificuldade para entender a diferença: https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render

pluma picture pluma em 18 fev. 2020

No meu caso, eu tinha let match = useRouteMatch("/user/:id"); fora do componente, que é um gancho do roteador react, então o erro estava correto.

Rolando-Barbella picture Rolando-Barbella em 27 fev. 2020

a partir de

para

gabrielyangzon picture gabrielyangzon em 5 mar. 2020
👍4 👎2 🎉1

a partir de

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

para

<Route path="/component"><myComponent /></Route>
ammoradi picture ammoradi em 28 mar. 2020
😕1 👎1 👍1

No meu caso, eu estava me referindo a uma biblioteca do objeto window que tinha uma versão diferente do React. Acabei usando a opção de configuração externals do webpack que me ajudou a referir-me aos react e react-dom daquela biblioteca e fez com que o erro desaparecesse.

Portanto, acredito que recebi esse erro porque You might have more than one copy of React in the same app .

AbreezaSaleem picture AbreezaSaleem em 15 abr. 2020

No meu caso, eu estava me referindo a uma biblioteca do objeto window que tinha uma versão diferente do React. Acabei usando a opção de configuração externals do webpack que me ajudou a referir-me aos react e react-dom daquela biblioteca e fez com que o erro desaparecesse.

Portanto, acredito que recebi esse erro porque You might have more than one copy of React in the same app .

@AbreezaSaleem Como você conseguiu isso? Estou tendo o mesmo problema, usar uma biblioteca que tem react como externa está de alguma forma aparecendo como uma versão diferente ... Tentei externals: [ 'react' ] , externals: { react: 'react' } e externals: { react: 'React' } , o resultado é sempre o mesmo ...

Myrdden picture Myrdden em 18 abr. 2020

Criei um exemplo um tanto mínimo para reproduzir isso. No meu caso, o problema acontece no ElectronJS com electron-webpack e react-dropzone

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

JuanIrache picture JuanIrache em 23 abr. 2020

existe uma boa solução de configuração do webpack para apontar para a mesma / única instância react. Era para adicionar uma resolução dentro do aplicativo que está usando o 'módulo to be npm'.

dentro de webpack.config.js, adicione um alias para reagir - para que ele use essa única instância react:

module.exports = {
resolve: {
    alias: {
      react: path.resolve('./node_modules/react')
    }
  },
 // other webpack settings
}
Yolantele picture Yolantele em 8 mai. 2020
👍3 🚀2 ❤1

lerna pode causar esse problema, como aprendi (aprendi?) hoje.

Usuários lerna, se você estiver desenvolvendo uma biblioteca de componentes, não inclua o react nas dependências da sua biblioteca, coloque-o em seus peerDependencies e @ types / react nas suas devDependencies.

rettgerst picture rettgerst em 2 jun. 2020

Para qualquer pessoa que use o lerna, você pode se deparar com esse problema ao executar testes em um pacote, onde o código faz referência a componentes em outro pacote.

O problema que tivemos neste caso foi devido à reação de ser importado na especificação, e também sendo importado em um componente na árvore de componentes que estava usando o Material UI's withStyles , que é implementado usando ganchos no Material UI.

Parece que react internamente gerencia o estado em uma variável ReactCurrentDispatcher.current , e isso acaba sendo definido em uma instância de react, mas usado na outra instância de react - quando está vazio, lança o Invalid hook call ... mensagem.

Já estávamos usando o Craco para substituir a configuração do webpack do Create React App no ​​momento da construção:

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

No entanto, esta substituição do webpack é usada apenas em tempo de compilação - ao executar os testes, o código não é compilado, mas instanciado a partir da fonte - então nossa solução foi fazer uso de CracoAlias em nosso craco.config.js para especificar o caminho de reação durante os testes:

  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 picture jasondarwin em 4 jun. 2020
👍1
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

framerate picture framerate  ·  3Comentários
varghesep picture varghesep  ·  3Comentários
jmullo picture jmullo  ·  3Comentários
MoOx picture MoOx  ·  3Comentários
zpao picture zpao  ·  3Comentários