React: Panggilan kait tidak valid. Kait hanya dapat dipanggil di dalam tubuh komponen fungsi. Hal ini dapat terjadi karena salah satu alasan berikut:

Saya pikir Anda menghadapi masalah yang sama dengan orang-orang di https://github.com/facebook/react/issues/13991 Bisakah Anda melihat beberapa solusi yang disajikan di bagian paling bawah masalah dan melihatnya bekerja untukmu?

Ini terjadi jika saya menggunakan kait di dalam HOC.

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

@revskill10 tolong buat masalah terpisah dengan repro kode dan kotak.

Saya akan merekomendasikan Anda untuk menggunakan https://www.npmjs.com/package/webpack-bundle-analyzer.

Itu terjadi kita sering lupa untuk menautkan reaksi dan reaksi-dom ke aplikasi induk jika perpustakaan menambahkan dua build reaksi dan mengarah ke masalah ini.

Jika itu masalahnya daripada hanya npm link react dan react-dom ke versi induk dari react dan react-dom.

Pustaka saya dan aplikasi buat-reaksi relatif satu sama lain dan saya menggunakan tautan npm

Apakah Anda membaca bagian ini?

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

Ini secara langsung membahas alur kerja link :

(Beri tahu saya jika ini tidak membantu dan kami dapat membuka kembali. Saya menghargai tulisan yang mendetail.)

Terima kasih, semuanya sudah ikutan

@gaearon Saya sudah mencoba dan mencoba lagi menyelesaikan ini sesuai dengan rekomendasi dari halaman Bereaksi:

Saya telah mengikuti semua instruksi ini dan saya masih mendapatkan kesalahan yang sama.

@threepointone cukup lucu sehingga banyak orang telah menemukan solusi untuk ini di #13991 dan saya telah menghabiskan sisa kemarin mengimplementasikannya tanpa hasil.

Oke, jika ini tidak membantu, biarkan terbuka sehingga seseorang dapat men-debug masalah Anda dan membantu Anda. Masalahnya _adalah_ sama (cara Anda menautkan paket menyebabkannya diduplikasi dalam bundel) tetapi saya tidak yakin mengapa saran itu tidak berhasil untuk Anda.

@gaearon Anda sekarang dapat menutupnya, solusi di atas berhasil.

Saya hanya memanggil hook dengan cara yang sangat mendasar.

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

Saya mendapatkan Kesalahan
Hooks can only be called inside of the body of a function component.
Saya telah membuat banyak proyek reaksi dari sketsa tetapi saya tidak pernah mendapatkan kesalahan ini sebelumnya.
Saya mengerti semua aturan hook.
Saya menghabiskan waktu selama 12 jam untuk men-debug dan menyelesaikannya, Tapi sayangnya saya tidak bisa, Sekarang saya tidak tahu.

// 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 apakah Anda dapat menyelesaikan masalah ini?

@carlosriveros
Kasus 1:
Anda mungkin memeriksa index.html Anda yang hanya memiliki satu bundel tag skrip

Jika Anda mendapatkan kesalahan yang sama setelah Anda memeriksa index.html
Kasus 2:
Jika Anda menggunakan html Webpack, Di properti plugins di dalam file webpack.config
Dan tidak memiliki {reject: true} dalam opsi new HTMLWebpackPlugin();

Anda harus menghapus tag skrip yang src ke bundel Anda di index.html

Karena HTMLWebpackPlugin akan menambahkan tag skrip yang menyertakan file bundel Anda secara otomatis.

Halo, saya baru mengenal React Hooks. Saya baru saja menggunakan Material-UI untuk membuat Search Bar di proyek saya. Saya menulis kode ini, tetapi ini tidak berfungsi dan memberikan masalah yang sama. Saya membaca dokumen React Hooks tetapi tidak mendapatkan apa-apa tentang ini.
KODE REACTJS
```import React dari 'react';
impor { makeStyles } dari '@material-ui/core/styles';
impor Kertas dari '@material-ui/core/Paper';
impor InputBase dari '@material-ui/core/InputBase';
impor IconButton dari '@material-ui/core/IconButton';
impor SearchIcon dari '@material-ui/icons/Search';

const useStyles = makeStyles({
akar: {
bantalan: '2px 4px',
tampilan: 'fleksi',
alignItems: 'pusat',
lebar: 400,
},
memasukkan: {
marginKiri: 8,
fleksibel: 1,
},
ikonTombol: {
bantalan: 10,
},
pembagi: {
lebar: 1,
tinggi: 28,
margin: 4,
},
});

fungsi Fitur() {
kelas const = useStyles();

kembali (





);
}

ekspor Fitur default;

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

VERSI: KAPAN

• Simpul -- v10.15.3
• Bereaksi -- ^16.8.5
• Material-UI -- ^4.0.1

HASIL YANG DIHARAPKAN

• KODE VS bawaan dan _Bilah pencarian_ yang diharapkan_
  KELUARAN
  _TypeError: Object(...) bukan fungsi_
  _Panggilan kait tidak valid. Kait hanya dapat dipanggil di dalam tubuh komponen fungsi. Hal ini dapat terjadi karena salah satu alasan berikut:_

MENCOBA
_Coba jalankan di CODESANDBOX , semuanya berjalan dengan baik_ Periksa .

Halo, saya baru mengenal React Hooks. Saya baru saja menggunakan Material-UI untuk membuat Search Bar di proyek saya. Saya menulis kode ini, tetapi ini tidak berfungsi dan memberikan masalah yang sama. Saya membaca dokumen React Hooks tetapi tidak mendapatkan apa-apa tentang ini.
KODE 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;

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

VERSI: KAPAN

• Simpul -- v10.15.3
• Bereaksi -- ^16.8.5
• Material-UI -- ^4.0.1

HASIL YANG DIHARAPKAN

• KODE VS bawaan dan _Bilah pencarian_ yang diharapkan_
  KELUARAN
  _TypeError: Object(...) bukan fungsi_
  _Panggilan kait tidak valid. Kait hanya dapat dipanggil di dalam tubuh komponen fungsi. Hal ini dapat terjadi karena salah satu alasan berikut:_

MENCOBA
_Coba jalankan di CODESANDBOX , semuanya berjalan dengan baik_ Periksa .

Saya juga memenuhi pertanyaan ini saat menggunakan material-ui.

@stupidsongshu , jadi bagaimana Anda menyelesaikannya?

Halo, saya baru mengenal React Hooks. Saya baru saja menggunakan Material-UI untuk membuat Search Bar di proyek saya. Saya menulis kode ini, tetapi ini tidak berfungsi dan memberikan masalah yang sama. Saya membaca dokumen React Hooks tetapi tidak mendapatkan apa-apa tentang ini.
KODE 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;

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

VERSI: KAPAN

• Simpul -- v10.15.3
• Bereaksi -- ^16.8.5
• Material-UI -- ^4.0.1

HASIL YANG DIHARAPKAN

• KODE VS bawaan dan _Bilah pencarian_ yang diharapkan_
  KELUARAN
  _TypeError: Object(...) bukan fungsi_
  _Panggilan kait tidak valid. Kait hanya dapat dipanggil di dalam tubuh komponen fungsi. Hal ini dapat terjadi karena salah satu alasan berikut:_

MENCOBA
_Coba jalankan di CODESANDBOX , semuanya berjalan dengan baik_ Periksa .

Ini terjadi pada saya hari ini dan saya baru saja menjalankan npm install --save react-dom@latest

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

Saya mengikuti instruksi yang diberikan di halaman bantuan tetapi masih tidak menyelesaikan masalah

Bagi saya, kami menyelesaikannya untuk saat ini hanya dengan memberikan React sebagai prop. Ini adalah aplikasi dan modul terpisah yang kami kendalikan sepenuhnya, jadi saya tidak tahu apakah itu berlaku untuk semua orang.

Itu tidak membantu saya juga..
Menggunakan React & React-DOM = 16.8.0 dan Material-UI = 4.1.3

Saya telah menguji semua solusi tentang masalah kait ini, setiap impor komponen dari lib eksternal menggunakan kait akan macet karena ada 2 contoh reaksi (satu dari lib, satu dari aplikasi saya).

Saya telah mengikuti semua saran, sejauh ini tidak ada yang berhasil. Saya akan membuat komponen dengan status sampai diklarifikasi lebih lanjut ...

Masalah yang sama di sini. Kami memiliki Proyek dengan dua contoh reaksi. Satu sebagai lib dan satu app yang menggunakan lib .

Saya menyelesaikannya dengan menghapus yarn.lock , package-lock.json , node_modules , dist , jenis cache dan membangun file dan kemudian menjalankan yarn atau npm install untuk menginstal perpustakaan lagi. Sekarang berhasil!

Saya menyelesaikan ini dengan perubahan

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

ke

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

tapi gak tau kenapa :(

Diperbaiki dengan menggunakan komponen alih-alih dirender secara tidak sengaja. Panduan resmi tidak menyebutkan skenario ini.
Terima kasih, xyj404
<Route path="/login" exact component={LoginForm} />

Saya memiliki masalah yang sama tetapi penyebabnya berbeda. Untuk siapa pun yang menggunakan plugin atau cuplikan impor otomatis, pastikan Anda mengimpor dari kasus yang sama bereaksi.

Jika Anda memiliki campuran import {useEffect} from 'react' dan import {useEffect} from 'React' Anda akan mengalami masalah ini.

Saya juga memiliki masalah ini, meskipun semuanya berfungsi dengan baik untuk saya di buku cerita, tetapi ketika digunakan dalam aplikasi itu memberikan kesalahan yang sama

masalah yang sama juga berfungsi
baik-baik saja di buku cerita, tetapi menggunakan aplikasi menimbulkan kesalahan ini

Kesalahan yang sama, saya mendapatkannya ketika saya menjalankan npm test tetapi aplikasi berfungsi dengan baik.
Ini package.json , ada saran? Saya benar-benar terjebak dan membuang-buang waktu untuk menangani kesalahan ini

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

Mengalami situasi ini juga menggunakan react dan react-dom keduanya v16.8.6, menggunakan kait makeStyles dari @material-ui/core di aplikasi terpisah yang ditautkan menggunakan tautan npm.

Setelah memutakhirkan aplikasi utama untuk bereaksi dan bereaksi-dom v16.9.0, dan menautkan kembali aplikasi yang menggunakan kait yang menyebabkan masalah, semuanya mulai berfungsi kembali.

Ya, saya memiliki masalah yang sama ketika saya menggunakan @material-ui. Butuh lebih banyak waktu untuk mencari tahu masalah ini. Kemudian saya mencari di google dan menemukan solusi untuk ini. Ada di sini http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-function-component/

Postingan asli:

Saat melihat beberapa contoh penulisan kode Material UI dalam React dan menggunakan TypeScript (dalam file .tsx tepatnya), Anda mungkin menemukan kesalahan saat runtime seperti “Invalid hook call. Kait hanya dapat dipanggil di dalam tubuh komponen fungsi”.

Berikut adalah contoh kode yang menyebabkan kesalahan ini

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

Yang perlu kita lakukan adalah membungkus kode useStyles dalam suatu fungsi dan mengganti kode yang menggunakannya, jadi misalnya

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

Ini juga menunjukkan bagaimana kita dapat membuat komponen yang dapat digunakan kembali hanya dari fungsi sederhana.

=> Ini gila tapi itu bekerja dengan baik. Semoga ini bisa membantu.

Jika Anda menggunakan lerna atau monorepo seperti saya, tambahkan sth seperti ini ke konfigurasi penyelesaian Webpack Anda

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

Jika Anda mendapatkannya di Storybook, tambahkan juga ke konfigurasi Webpack kustom di sana.

Catatan tambahan, jika ini memperbaiki masalah untuk Anda, bundel yang dibuat webpack Anda juga memiliki 2 versi reaksi di dalamnya (gunakan sth seperti penganalisa bundel webpack untuk memeriksanya). Dalam kasus saya, saya memiliki paket terpisah di monorepo saya yang menangani bundling dan semua perkakas jadi saya harus menambahkan alias.

Jika Anda menggunakan lerna atau monorepo seperti saya, tambahkan sth seperti ini ke konfigurasi penyelesaian Webpack Anda

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

Jika Anda mendapatkannya di Storybook, tambahkan juga ke konfigurasi Webpack kustom di sana.

Catatan tambahan, jika ini memperbaiki masalah untuk Anda, bundel yang dibuat webpack Anda juga memiliki 2 versi reaksi di dalamnya (gunakan sth seperti penganalisa bundel webpack untuk memeriksanya). Dalam kasus saya, saya memiliki paket terpisah di monorepo saya yang menangani bundling dan semua perkakas jadi saya harus menambahkan alias.

Terima kasih, itu memecahkan masalah saya, saya menginstal React lain di direktori docs , yang menyebabkan masalah ini.

Saya hanya memanggil hook dengan cara yang sangat mendasar.

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

Saya mendapatkan Kesalahan
Hooks can only be called inside of the body of a function component.
Saya telah membuat banyak proyek reaksi dari sketsa tetapi saya tidak pernah mendapatkan kesalahan ini sebelumnya.
Saya mengerti semua aturan hook.
Saya menghabiskan waktu selama 12 jam untuk men-debug dan menyelesaikannya, Tapi sayangnya saya tidak bisa, Sekarang saya tidak tahu.

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

Anda mungkin memiliki versi React dan React DOM yang tidak cocok.
Saya memiliki masalah yang sama diselesaikan dengan membuat perubahan di versi React

Saya menghadapi masalah ini ketika saya mencoba mengubah komponen saya dari komponen fungsional ke komponen classfull dan saya juga mendapatkan kesalahan ini jadi inilah solusi saya mengenai kesalahan ini semoga membantu dalam kasus Anda juga.

coba gunakan komponen tingkat tinggi dalam kasus ini

impor Bereaksi dari 'bereaksi';
impor PropTypes dari 'prop-types';
impor { withStyles } dari '@material-ui/styles';
impor Tombol dari '@material-ui/core/Button';

const gaya = tema => ({
akar: {
latar belakang: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
batas: 0,
batasRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
warna putih',
tinggi: 48,
pengisi: '0 30px',
},
});

class HigherOrderComponent memperluas React.Component {

memberikan(){
const { kelas } = this.props;
kembali (

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

ekspor default withStyles(styles)(HigherOrderComponent);

Saya belajar React dan FWIW, saya juga melihat masalah saat mencoba merender App() seperti ini:

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

Alasan saya adalah bahwa <App /> secara implisit akan membuat template mini hanya untuk menyisipkan komponen App, jadi saya langsung memanggil App, yang mengembalikan template JSX.

Namun, begitu saya mulai menggunakan setState(), itu menyebabkan masalah yang disebutkan di atas. Mengubah ke <App /> menyelesaikan ini.

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

catatan: $ hanyalah pembantu const $ = sel => document.querySelector(sel);

Bagi mereka yang masih mengalami kesalahan ini setelah memecahkan masalah semua perbaikan yang diusulkan, periksa kembali apakah Anda menggunakan casing direktori yang benar saat menjalankan proyek Anda. Saya terus mengalami masalah pada PC saya dan menemukan inilah alasannya.

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

Saya mendapatkan kesalahan itu saat menjalankan tes setelah memperbarui react-dom ke versi 16.10.2 . Meningkatkan enzyme-adapter-react-16 ke versi 1.15.1 memperbaikinya

Oh man saya sedang bereaksi v16.10.2. Saya sudah menghabiskan beberapa jam mencoba melawan ini tetapi saya tidak akan melanjutkan pertempuran ini lagi karena saya memiliki hal-hal yang lebih penting untuk dilakukan. Saya setuju dengan tetap menggunakan react-final-form 4.1.0 untuk saat ini. Betapa frustrasinya.

Ini memecahkan masalah saya:

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

Saya baru saja mengalami masalah yang sama setelah memutakhirkan dependensi dan menghabiskan berjam-jam mencoba menyelesaikannya.

npm ls react menunjukkan yang berikut:

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

Menyematkan react dan react-dom ke 16.9.0 membuat kesalahan hilang karena membuat ketergantungan sementara hilang. Saya pertama kali mengira ini berarti ada regresi di 16.10.0 sampai saya perhatikan masalah juga terjadi di 16.8.6 (karena ketergantungan sementara tampaknya disematkan).

Ternyata bidang resolutions yarn agak rewel untuk bekerja dengan benar, terutama di lerna monorepos, tetapi menghilangkan salinan kedua dari React berhasil. Saya masih tidak tahu bagaimana itu berakhir di bundel tetapi itulah yang menyebabkan masalah.

Saya sekarang mempertimbangkan untuk menjatuhkan @storybook/addon-info sepenuhnya karena juga bergantung pada ketergantungan lain yang memiliki ketergantungan pada React 0.14 (ya), meskipun yang satu itu belum menyebabkan masalah.

EDIT: Sebagai catatan, saya menghabiskan sekitar empat jam untuk ini karena saya tidak bisa mendapatkan resolutions untuk menghilangkan duplikat dan menolak untuk percaya bahwa salinan React bahkan masuk ke dalam bundel. Jangan seperti saya. Deduplikasi Reacts sementara Anda.

Ini terjadi jika saya menggunakan kait di dalam HOC.

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

Saya juga menghadapi masalah yang sama.

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

bisakah anda membimbing saya?

@Neeraj-swarnkar Coba kurangi masalah Anda menjadi contoh minimal yang masih menghasilkan kesalahan.

Ini hampir selalu bermuara pada salah satu dari dua masalah:

• Anda pikir Anda melewatkan sebuah komponen tetapi sebenarnya itu adalah prop render (yaitu "komponen" dipanggil sebagai fungsi, bukan komponen)
• Anda entah bagaimana menggabungkan lebih dari satu versi React melalui dependensi sementara Anda dan mereka saling menginjak

Sayangnya jejak tumpukan cenderung menyesatkan dalam kasus ini tetapi pesan kesalahan umumnya memberi Anda ide yang tepat.

@Neeraj-swarnkar Coba kurangi masalah Anda menjadi contoh minimal yang masih menghasilkan kesalahan.

Ini hampir selalu bermuara pada salah satu dari dua masalah:

• Anda pikir Anda melewatkan sebuah komponen tetapi sebenarnya itu adalah prop render (yaitu "komponen" dipanggil sebagai fungsi, bukan komponen)
• Anda entah bagaimana menggabungkan lebih dari satu versi React melalui dependensi sementara Anda dan mereka saling menginjak

Sayangnya jejak tumpukan cenderung menyesatkan dalam kasus ini tetapi pesan kesalahan umumnya memberi Anda ide yang tepat.

Terima kasih atas petunjuknya, dapatkah Anda membimbing saya apa yang bisa dilakukan lebih baik atau apa yang harus saya lakukan untuk memperbaikinya?

@Neeraj-swarnkar coba komentari kode dan ganti dengan placeholder sampai Anda memiliki contoh minimal yang masih menghasilkan kesalahan yang sama.

Jika Anda tidak memiliki rekan kerja atau rekan kerja, Anda dapat meminta untuk membantu Anda dalam men-debug ini lebih lanjut, lihat apakah Anda dapat menemukan pertemuan lokal, kelompok belajar, atau perusahaan yang membuka jam kerja dan meminta bantuan mereka. Jika semuanya gagal, pekerjakan seseorang untuk memeriksanya untuk Anda.

Pustaka saya dan aplikasi buat-reaksi relatif satu sama lain dan saya menggunakan tautan npm

Apakah Anda membaca bagian ini?

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

Ini secara langsung membahas alur kerja link :

Ini bekerja seperti pesona!

Pustaka saya dan aplikasi buat-reaksi relatif satu sama lain dan saya menggunakan tautan npm

Apakah Anda membaca bagian ini?

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

Ini secara langsung membahas alur kerja link :

Ini bekerja seperti pesona!

Saya memecahkan masalah ini kemarin, itu mengganggu saya selama setengah bulan. Kemarin saya menyingkat kode menjadi sangat sedikit (cukup tambahkan

Saya menyelesaikan ini dengan perubahan

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

ke

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

tapi gak tau kenapa :(

Itu berhasil untuk saya, tetapi saya juga tidak tahu mengapa.

Jika Anda datang ke sini karena Anda menggunakan HOC + makeStyles dari Material UI,
inilah jawaban Anda: https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-function-com

Saya menyelesaikan ini dengan perubahan

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

ke

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

tapi gak tau kenapa :(

Itu berhasil untuk saya, tetapi saya juga tidak tahu mengapa.

Prop "component" mengharapkan komponen React, prop "render" mengharapkan fungsi yang akan dipanggil sebagai fungsi. Komponen fungsi adalah komponen, memanggilnya sebagai fungsi normal tidak berfungsi jika menggunakan kait dan umumnya bukan ide yang baik.

Saya menyelesaikan ini dengan perubahan

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

ke

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

tapi gak tau kenapa :(

Terima kasih, Sayang, Ini berhasil untuk saya, Tetap saja, saya bingung, mengapa?

@jaisonjjames lihat balasan saya. Ada beberapa penjelasan di StackOverflow jika Anda kesulitan memahami perbedaannya: https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render

Dalam kasus saya, saya memiliki let match = useRouteMatch("/user/:id"); luar komponen, yang merupakan pengait dari react-router, jadi kesalahannya benar.

dari

ke

dari

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

ke

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

Dalam kasus saya, saya merujuk ke perpustakaan dari objek window yang memiliki versi Bereaksi yang berbeda. Saya akhirnya menggunakan opsi konfigurasi externals dari webpack yang membantu saya merujuk ke react dan react-dom perpustakaan itu dan membuat kesalahan hilang.

Jadi saya yakin alasan saya mendapatkan kesalahan ini adalah karena You might have more than one copy of React in the same app .

Dalam kasus saya, saya merujuk ke perpustakaan dari objek window yang memiliki versi Bereaksi yang berbeda. Saya akhirnya menggunakan opsi konfigurasi externals dari webpack yang membantu saya merujuk ke react dan react-dom perpustakaan itu dan membuat kesalahan hilang.

Jadi saya yakin alasan saya mendapatkan kesalahan ini adalah karena You might have more than one copy of React in the same app .

@AbreezaSaleem Bagaimana Anda mencapai ini? Saya mengalami masalah yang sama, menggunakan perpustakaan yang memiliki react sebagai eksternal entah bagaimana muncul sebagai versi yang berbeda... Saya sudah mencoba externals: [ 'react' ] , externals: { react: 'react' } dan externals: { react: 'React' } , hasilnya selalu sama...

Saya membuat contoh yang agak minimal untuk mereproduksi ini. Dalam kasus saya, masalah terjadi pada ElectronJS dengan electron-webpack dan react-dropzone

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

ada solusi konfigurasi webpack yang bagus untuk menunjuk ke instance reaksi yang sama/tunggal. Itu untuk menambahkan resolusi di dalam aplikasi yang menggunakan 'menjadi modul npm'.

di dalam webpack.config.js, tambahkan alias untuk bereaksi - jadi ia menggunakan satu instance reaksi itu:

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

lerna dapat menyebabkan masalah ini, seperti yang saya pelajari (belajar?) hari ini.

pengguna lerna, jika Anda mengembangkan pustaka komponen, jangan sertakan reaksi di dependensi pustaka Anda, taruh di peerDependencies Anda dan @types/react di devDependencies Anda.

Bagi siapa saja yang menggunakan lerna, Anda mungkin menemukan masalah ini saat menjalankan tes dalam satu paket, di mana kode mereferensikan komponen dalam paket lain.

Masalah yang kami alami dalam kasus ini adalah karena reaksi diimpor dalam spesifikasi, dan juga diimpor dalam komponen di pohon komponen yang menggunakan withStyles UI Material , yang diimplementasikan menggunakan kait di UI Material.

Tampaknya react secara internal mengelola status dalam variabel ReactCurrentDispatcher.current , dan ini akhirnya diatur dalam satu instance reaksi, tetapi digunakan dalam instance reaksi lainnya -- ketika kosong, ia melempar Invalid hook call ... pesan.

Kami sudah menggunakan Craco untuk mengganti konfigurasi webpack Create React App pada waktu pembuatan:

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

Namun, penggantian paket web ini hanya digunakan pada waktu pembuatan -- saat menjalankan pengujian, kode tidak dibuat, tetapi dibuat dari sumber -- jadi solusi kami adalah menggunakan CracoAlias di craco.config.js untuk menentukan jalur reaksi selama pengujian:

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