React: अमान्य हुक कॉल। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है। ऐसा निम्न में से किसी एक कारण से हो सकता है:

को निर्मित 4 अप्रैल 2019 · 61टिप्पणियाँ · स्रोत: facebook/react

हाय सब, मैं प्रतिक्रिया करने के लिए नया हूं और मैं घटकों की एक प्रतिक्रिया पुस्तकालय बनाने की कोशिश कर रहा हूं और मुझे इस समस्या का सामना करना पड़ा क्योंकि मैं जो घटक बना रहा हूं उनमें से एक प्रतिक्रिया हुक का उपयोग करता है।

अस्वीकरण: यह मेरा पहली बार कोई मुद्दा है, इसलिए कृपया मेरे साथ रहें।

इसलिए मैं एक अकॉर्डियन घटक बनाने की कोशिश कर रहा हूं जो इन वर्गों के बीच accordion__item--open और accordion__item को खोलने और बंद करने के लिए टॉगल करता है।

पैकेज.जेसन

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

यह अकॉर्डियन कंटेनर है:

```
'प्रतिक्रिया' से आयात प्रतिक्रिया;

फंक्शन अकॉर्डियन ({बच्चों}) {

वापसी (

{ बच्चे }

);

}

निर्यात डिफ़ॉल्ट अकॉर्डियन;

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

'प्रतिक्रिया' से आयात प्रतिक्रिया, {useState};

फ़ंक्शन AccordionItem ({हेडर, सामग्री}) {

const [ isActive , टॉगलएक्टिव ] = useState(false);

वापसी (

अकॉर्डियन__आइटम ${ isActive ? 'accordion__item--open' : '' } }>

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

)

};

निर्यात डिफ़ॉल्ट AccordionItem;

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

'प्रतिक्रिया' से आयात प्रतिक्रिया;

'रिएक्शन-लिब' से {AccordionItem} आयात करें
'react-lib' से {Accordion} आयात करें;

फंक्शन ऐप ({प्रोप्स}) {

वापसी (

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

)

}

निर्यात डिफ़ॉल्ट ऐप;

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

अमान्य हुक कॉल। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है। ऐसा निम्न में से किसी एक कारण से हो सकता है:

आपके पास रिएक्ट और रेंडरर के बेमेल संस्करण हो सकते हैं (जैसे रिएक्ट डोम)
आप कांटों के नियम तोड़ रहे होंगे
आपके पास एक ही ऐप में रिएक्ट की एक से अधिक कॉपी हो सकती हैं
डिबग करने और इस समस्या को ठीक करने के बारे में सुझावों के लिए https://fb.me/react-invalid-hook-call देखें।

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

'./accordion' से अकॉर्डियन आयात करें;
'./AccordionItem' से AccordionItem आयात करें;

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

'रिएक्शन-लिब' से आयात {अकॉर्डियन};
'react-lib' से {AcordionItem} आयात करें;
```

रिएक्ट के संस्करण, ब्राउज़र / ओएस इस मुद्दे से प्रभावित हैं:

प्रतिक्रिया और प्रतिक्रिया-डोम: दोनों प्रतिक्रिया-lib और myapp दोनों पर ^16.8.6
ब्राउज़र: बहादुर Version 0.61.52 Chromium: 73.0.3683.86 (Official Build) (64-bit)
ओएस: मैकोज़ हाई सिएरा Version 10.13.6 (17G5019)

Needs Investigation

स्रोत

sethandleah

👍56 ❤2

सबसे उपयोगी टिप्पणी

मेरी लाइब्रेरी और क्रिएट-रिएक्शन-ऐप एक-दूसरे के सापेक्ष हैं और मैं npm लिंक का उपयोग कर रहा हूं

क्या आपने यह भाग पढ़ा?

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

यह सीधे link कार्यप्रवाह को संबोधित करता है:

Screen Shot 2019-04-04 at 09 28 47

gaearon 4 अप्रैल 2019

👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

सभी 61 टिप्पणियाँ

मुझे लगता है कि आप https://github.com/facebook/react/issues/13991 में लोगों के समान मुद्दे का सामना कर रहे हैं आप के लिए काम करता हूं?

threepointone 4 अप्रैल 2019

👍1

ऐसा तब होता है जब मैं एचओसी के अंदर हुक का उपयोग करता हूं।

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

revskill10 4 अप्रैल 2019

👍62 ❤4 🎉1

@ revskill10 कृपया

threepointone 4 अप्रैल 2019

मैं आपको https://www.npmjs.com/package/webpack-bundle-analyzer का उपयोग करने की सलाह दूंगा

ऐसा होता है कि हम अक्सर पुस्तकालयों के मामले में प्रतिक्रिया और प्रतिक्रिया-डोम को मूल अनुप्रयोग से जोड़ना भूल जाते हैं जो प्रतिक्रिया के दो बिल्ड जोड़ते हैं और इस मुद्दे की ओर ले जाते हैं।

अगर ऐसा है तो केवल npm लिंक प्रतिक्रिया और प्रतिक्रिया-डोम के मूल संस्करण के लिए प्रतिक्रिया और प्रतिक्रिया-डोम की तुलना में।

iAmServerless 4 अप्रैल 2019

मेरी लाइब्रेरी और क्रिएट-रिएक्शन-ऐप एक-दूसरे के सापेक्ष हैं और मैं npm लिंक का उपयोग कर रहा हूं

क्या आपने यह भाग पढ़ा?

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

यह सीधे link कार्यप्रवाह को संबोधित करता है:

Screen Shot 2019-04-04 at 09 28 47

gaearon 4 अप्रैल 2019

👍114 🎉27 🚀20 👎20 😕15 ❤12 👀5 😄3

(अगर यह मदद नहीं करता है तो मुझे बताएं और हम फिर से खोल सकते हैं। मैं विस्तृत लेखन की सराहना करता हूं।)

gaearon 4 अप्रैल 2019

धन्यवाद, पिच करने के लिए सभी को

@gaearon मैंने पहले ही प्रतिक्रिया पृष्ठ की सिफारिशों के अनुसार इसे हल करने का प्रयास किया था और पुनः प्रयास किया था:

मैंने इन सभी निर्देशों का पालन किया है और मुझे अभी भी वही त्रुटि मिलती है।

@threepointone काफी मज़ेदार है, इतने सारे लोगों ने इसका समाधान # 13991 पर पाया है और मैंने बाकी कल उन्हें बिना किसी सफलता के लागू करने में बिताया है।

sethandleah 5 अप्रैल 2019

ठीक है, अगर इससे मदद नहीं मिली तो इसे खुला छोड़ दें ताकि कोई आपकी समस्या को डीबग कर सके और आपकी मदद कर सके। समस्या _is_ वही है (जिस तरह से आप पैकेज लिंक करते हैं, उन्हें बंडल में डुप्लिकेट किया जाता है) लेकिन मुझे यकीन नहीं है कि सुझाव आपके लिए क्यों काम नहीं करता है।

gaearon 5 अप्रैल 2019

@gaearon अब आप इसे बंद कर सकते हैं, ऊपर दिए गए समाधान ने काम किया।

sethandleah 7 अप्रैल 2019

मैं सिर्फ हुक को बहुत ही बुनियादी तरीके से बुलाता हूं।

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

function App() {
const [number, setNumber] = useState(0);
const increase = () => {
    setNumber(number+1);
}
return <div>
<span>Counting: {number}</span>
<button onClick={increase} >Increase</button>
</div>
}

const selector = document.getElementById('app');

ReactDOM.render(<App />, selector);

मुझे त्रुटि मिलती है
Hooks can only be called inside of the body of a function component.
मैंने स्केच से बहुत सारे रिएक्ट प्रोजेक्ट बनाए हैं लेकिन मुझे यह त्रुटि पहले कभी नहीं मिली।
मैं हुक के सभी नियमों को समझता हूं।
मैं डिबग करने और इसे हल करने के लिए 12 घंटे का समय बिताता हूं, लेकिन दुर्भाग्य से मैं नहीं कर सकता, अब मुझे कोई जानकारी नहीं है।

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // I get true

worapolburaphan 8 मई 2019

👍20 ❤1

@xeastcrast क्या आप इस मुद्दे को हल करने में सक्षम थे?

carlosriveros 29 मई 2019

@carlosriveros
मामला एक:
आप अपने index.html की जांच कर सकते हैं जिसमें केवल एक स्क्रिप्ट टैग बंडल है

यदि आपको index.html की जाँच करने के बाद वही त्रुटि मिलती है
केस 2:
यदि आप Webpack html का उपयोग करते हैं, तो webpack.config फ़ाइल के अंदर प्लगइन्स गुण में
और नए HTMLWebpackPlugin() के विकल्प में {reject: true} नहीं है;

आपको index.html . में अपने बंडल में मौजूद स्क्रिप्ट टैग को हटाना होगा

क्योंकि HTMLWebpackPlugin स्क्रिप्ट टैग जोड़ देगा जिसमें आपकी बंडल फ़ाइल स्वचालित रूप से शामिल होगी।

worapolburaphan 30 मई 2019

👍13 ❤6 🎉6 🚀4 😄4

नमस्ते, मैं रिएक्ट हुक के लिए नया हूँ। मैंने अपने प्रोजेक्ट में सर्च बार बनाने के लिए अभी सामग्री-यूआई का उपयोग किया है। मैंने यह कोड लिखा है, लेकिन यह काम नहीं कर रहा है और एक ही मुद्दा दे रहा है। मैंने रिएक्ट हुक डॉक्स पढ़ा लेकिन इस बारे में कुछ नहीं मिला।
REACTJS कोड
``` 'प्रतिक्रिया' से आयात प्रतिक्रिया;
'@material-ui/core/styles' से {makeStyles} आयात करें;
'@ सामग्री-यूआई/कोर/पेपर' से पेपर आयात करें;
'@ सामग्री-यूआई/कोर/इनपुटबेस' से इनपुटबेस आयात करें;
'@ material-ui/core/IconButton' से IconButton आयात करें;
'@ सामग्री-यूआई/आइकन/खोज' से SearchIcon आयात करें;

कॉन्स्ट यूज स्टाइल्स = मेक स्टाइल्स ({
जड़: {
पैडिंग: '2px 4px',
प्रदर्शन: 'फ्लेक्स',
संरेखित करें: 'केंद्र',
चौड़ाई: 400,
},
इनपुट: {
मार्जिन लेफ्ट: 8,
फ्लेक्स: 1,
},
आइकनबटन: {
पैडिंग: 10,
},
विभक्त: {
चौड़ाई: 1,
ऊंचाई: 28,
मार्जिन: 4,
},
});

फ़ंक्शन फ़ीचर () {
कॉन्स्ट क्लासेस = यूज़ स्टाइल्स ();

वापसी (

);
}

निर्यात डिफ़ॉल्ट सुविधा;

**PACKAGE.JSON**
```{
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

संस्करण

नोड - v10.15.3
प्रतिक्रिया -- ^16.8.5
सामग्री-यूआई -- ^4.0.1

अपेक्षित परिणाम

बिल्ट-इन VS CODE और अपेक्षित _A सर्च बार_
आउटपुट
_टाइप एरर: ऑब्जेक्ट (...) एक फंक्शन नहीं है_
_अमान्य हुक कॉल। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है। ऐसा निम्न में से किसी एक कारण से हो सकता है:_

प्रयत्न
_CODESANDBOX में चलाने का प्रयास करें , सब कुछ ठीक चलता है_ इसे जांचें ।

B4BIPIN 2 जून 2019

👍3

नमस्ते, मैं रिएक्ट हुक के लिए नया हूँ। मैंने अपने प्रोजेक्ट में सर्च बार बनाने के लिए अभी सामग्री-यूआई का उपयोग किया है। मैंने यह कोड लिखा है, लेकिन यह काम नहीं कर रहा है और एक ही मुद्दा दे रहा है। मैंने रिएक्ट हुक डॉक्स पढ़ा लेकिन इस बारे में कुछ नहीं मिला।
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;
पैकेज.JSON
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
संस्करण
नोड - v10.15.3
प्रतिक्रिया -- ^16.8.5
सामग्री-यूआई -- ^4.0.1
अपेक्षित परिणाम
बिल्ट-इन VS CODE और अपेक्षित _A सर्च बार_
आउटपुट
_टाइप एरर: ऑब्जेक्ट (...) एक फंक्शन नहीं है_
_अमान्य हुक कॉल। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है। ऐसा निम्न में से किसी एक कारण से हो सकता है:_
प्रयत्न
_CODESANDBOX में चलाने का प्रयास करें , सब कुछ ठीक चलता है_ इसे जांचें ।

सामग्री-यूआई का उपयोग करते समय मैं यह प्रश्न भी पूरा करता हूं।

stupidsongshu 3 जून 2019

@stupidsongshu , तो आपने इसे कैसे हल किया?

B4BIPIN 7 जून 2019

नमस्ते, मैं रिएक्ट हुक के लिए नया हूँ। मैंने अपने प्रोजेक्ट में सर्च बार बनाने के लिए अभी सामग्री-यूआई का उपयोग किया है। मैंने यह कोड लिखा है, लेकिन यह काम नहीं कर रहा है और एक ही मुद्दा दे रहा है। मैंने रिएक्ट हुक डॉक्स पढ़ा लेकिन इस बारे में कुछ नहीं मिला।
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;
पैकेज.JSON
  "name": "builder-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.0.1",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.1",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
संस्करण
नोड - v10.15.3
प्रतिक्रिया -- ^16.8.5
सामग्री-यूआई -- ^4.0.1
अपेक्षित परिणाम
बिल्ट-इन VS CODE और अपेक्षित _A सर्च बार_
आउटपुट
_टाइप एरर: ऑब्जेक्ट (...) एक फंक्शन नहीं है_
_अमान्य हुक कॉल। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है। ऐसा निम्न में से किसी एक कारण से हो सकता है:_
प्रयत्न
_CODESANDBOX में चलाने का प्रयास करें , सब कुछ ठीक चलता है_ इसे जांचें ।

यह आज मेरे लिए खुशी की बात है और मैं सिर्फ npm install --save React -dom@latest . चलाता हूं

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

vcibel 7 जून 2019

❤1

मैंने सहायता पृष्ठ में दिए गए निर्देशों का पालन किया लेकिन फिर भी इससे समस्या का समाधान नहीं हुआ

miguelmota 12 जून 2019

👍2

मेरे लिए, हमने इसे केवल रिएक्ट को एक प्रोप के रूप में पास करके इसे अभी के लिए हल किया है। यह एक ऐप और अलग मॉड्यूल है जिस पर हमारा पूरा नियंत्रण है, इसलिए मुझे नहीं पता कि यह सभी पर लागू होता है या नहीं।

mikeaustin 22 जून 2019

इसने मेरी भी मदद नहीं की ..
प्रतिक्रिया और प्रतिक्रिया-डोम = 16.8.0 और सामग्री-यूआई = 4.1.3 . का उपयोग करना

Barathwaja 26 जून 2019

मैं इस हुक समस्या के बारे में सभी समाधानों का परीक्षण कर रहा हूं, हुक का उपयोग करके बाहरी lib से किसी घटक का कोई भी आयात क्रैश हो जाएगा क्योंकि 2 प्रतिक्रिया उदाहरण हैं (एक lib से, एक मेरे ऐप से)।

मैंने सभी सुझावों का पालन किया है, अब तक कुछ भी काम नहीं कर रहा है। मैं एक राज्य के साथ घटक बनाने जा रहा हूं जब तक कि इसे और स्पष्ट नहीं किया जाता ...

tquiroga 3 जुल॰ 2019

😕4

यहां वही मुद्दा। हमारे पास दो प्रतिक्रिया उदाहरणों वाला एक प्रोजेक्ट है। एक lib और एक app जो lib का उपभोग कर रहा है।

dude-awesome 10 जुल॰ 2019

मैं yarn.lock , package-lock.json , node_modules , dist , कैश की तरह को हटाकर हल करता हूं और फाइलों का निर्माण करता हूं और फिर yarn या npm install चलाता yarn npm install फिर से पुस्तकालयों को स्थापित करने के लिए। अब यह काम कर रहा है!

gtgalone 10 जुल॰ 2019

👍3

मैं इसे परिवर्तन द्वारा हल करता हूं

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

प्रति

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

लेकिन मुझे नहीं पता क्यों :(

xyj404 12 जुल॰ 2019

👍24 🎉10 ❤7

गलती से रेंडर करने के बजाय कंपोनेंट का उपयोग करके फिक्स्ड। आधिकारिक गाइड ने इस परिदृश्य का उल्लेख नहीं किया।
धन्यवाद, xyj404
<Route path="/login" exact component={LoginForm} />

MikeQin 30 जुल॰ 2019

👍10

मुझे भी यही समस्या थी लेकिन कारण अलग था। ऑटो-इम्पोर्ट प्लगइन्स या स्निपेट्स का उपयोग करने वाले किसी भी व्यक्ति के लिए सुनिश्चित करें कि आप उसी केस रिएक्ट से इम्पोर्ट करते हैं।

यदि आपके पास import {useEffect} from 'react' और import {useEffect} from 'React' तो आप इस समस्या का सामना करेंगे।

raza-jamil-harvest 16 अग॰ 2019

🎉1 👍1

मुझे भी यह समस्या है, हालांकि स्टोरीबुक में मेरे लिए सब कुछ ठीक काम करता है, लेकिन जब एप्लिकेशन में उपयोग किया जाता है तो यह वही त्रुटि देता है

AnimeManna 16 अग॰ 2019

वही समस्या भी काम करती है
स्टोरीबुक में ठीक है, लेकिन ऐप का उपयोग करने से यह त्रुटि हो जाती है

hugo-integrate 16 अग॰ 2019

वही त्रुटि, जब मैं npm test चलाता हूं तो मुझे यह मिलता है लेकिन ऐप ठीक काम करता है।
यह रहा मेरा package.json , कोई सुझाव? मैं वास्तव में फंस गया हूं और इस त्रुटि से निपटने में समय बर्बाद कर रहा हूं

{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/moment": "1.0.1",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.1",
    "animate.css": "^3.7.0",
    "aws-amplify": "^0.4.8",
    "aws-amplify-react": "^0.1.54",
    "axios": "^0.18.0",
    "file-saver": "^2.0.0",
    "ics-js": "^0.10.2",
    "material-ui-pickers": "2.1.1",
    "moment": "^2.23.0",
    "normalize.css": "^8.0.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.0",
    "react-date-range": "^1.0.0-beta",
    "react-dom": "^16.8.6",
    "react-google-maps": "^9.4.5",
    "react-jss": "^8.6.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1",
    "recharts": "^1.3.5",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0",
    "sweetalert2": "^7.33.1",
    "sweetalert2-react-content": "^1.0.1"
  },
  "scripts": {
    "start:dev": "node  -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/development.env",
    "start:stage": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/stage.env",
    "start:prod": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts start dotenv_config_path=./env/production.env",
    "build:stage": "node --max_old_space_size=2048 --max_old_space_size=1024 -r dotenv/config ./node_modules/.bin/react-scripts build dotenv_config_path=./env/stage.env",
    "build:dev": "node --max_old_space_size=2048 -r dotenv/config ./node_modules/react-scripts/bin/react-scripts build dotenv_config_path=./env/development.env",
    "build:prod": "node --max_old_space_size=2048 -r dotenv/config ./node_modules/react-scripts/bin/react-scripts build dotenv_config_path=./env/production.env",
    "test": "node -r dotenv/config ./node_modules/.bin/react-scripts test dotenv_config_path=./env/development.env --runInBand",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.0.0",
    "@testing-library/react": "^8.0.5",
    "@testing-library/react-hooks": "^1.1.0",
    "dotenv": "^6.0.0",
    "prettier": "^1.15.3",
    "react-test-renderer": "^16.8.6"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

simonepizzamiglio 20 अग॰ 2019

एनपीएम लिंक का उपयोग करके लिंक किए गए एक अलग ऐप में makeStyles हुक से @material-ui/core का उपयोग करके प्रतिक्रिया और प्रतिक्रिया-डोम दोनों v16.8.6 का उपयोग करके इस स्थिति में भाग लिया।

प्रतिक्रिया और प्रतिक्रिया-डोम v16.9.0 के लिए मुख्य ऐप को अपग्रेड करने के बाद, और उस ऐप को फिर से जोड़ने के बाद जो समस्या पैदा करने वाले हुक का उपयोग कर रहा था, सब कुछ फिर से काम करना शुरू कर दिया।

pmjonesg 22 अग॰ 2019

हाँ, जब मैं @ सामग्री-यूआई का उपयोग करता हूं तो मुझे एक ही समस्या थी। इस मुद्दे को समझने में अधिक समय लगता है। फिर मैंने गूगल पर सर्च किया और इसका हल ढूंढा। यह यहाँ है http://putridparrot.com/blog/react-material-ui-invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-function-component/

मूल पोस्ट:

प्रतिक्रिया के भीतर सामग्री यूआई कोड लिखने और टाइपस्क्रिप्ट का उपयोग करने के कुछ उदाहरणों को देखते समय (एक .tsx फ़ाइल के भीतर सटीक होने के लिए) आपको रनटाइम पर "अमान्य हुक कॉल" जैसी त्रुटि आ सकती है। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है"।

यहां कोड का एक उदाहरण दिया गया है जो इस त्रुटि का कारण बनता है

import React, { Component }  from "react";
import AddIcon from "@material-ui/icons/Add";
import { Fab } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
   fab: {
      margin: theme.spacing(1),
   },
}));

const classes = useStyles();

export default class SampleComponent extends Component<{}, {}> {
   public render() {
      return (
         <div>
            <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab>
         </div>
       );
   }
}

हमें जो करना है वह एक फ़ंक्शन में useStyles कोड को लपेटना है और उस कोड को प्रतिस्थापित करना है जो इसका उपयोग करता है, उदाहरण के लिए

const SampleFab = () => {
   const classes = useStyles();
   return <Fab color="primary" aria-label="Add" className={classes.fab}><AddIcon /></Fab>;
}

export default class SampleComponent extends Component<{}, {}> {
   public render() {
      return (
         <div>
            <SampleFab />
         </div>
      );
   }
}

इससे यह भी पता चलता है कि कैसे हम एक साधारण फ़ंक्शन से पुन: प्रयोज्य घटक बना सकते हैं।

=> यह पागल है लेकिन यह अच्छी तरह से काम कर रहा है। आशा है कि यह मदद कर सकता है।

bachphuc 23 अग॰ 2019

👍3

यदि आप मेरे जैसे लर्न या मोनोरेपो का उपयोग कर रहे हैं, तो अपने वेबपैक समाधान कॉन्फ़िगरेशन में इस तरह sth जोड़ें

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

यदि आप इसे स्टोरीबुक में प्राप्त कर रहे हैं, तो इसे वहां कस्टम वेबपैक कॉन्फ़िगरेशन में भी जोड़ें।

एक साइड नोट, यदि यह आपके लिए समस्या को हल करता है, तो आपके वेबपैक निर्मित बंडल में प्रतिक्रिया के 2 संस्करण भी थे (इसका निरीक्षण करने के लिए वेबपैक बंडल विश्लेषक की तरह sth का उपयोग करें)। मेरे मामले में, मेरे मोनोरेपो में एक अलग पैकेज था जो बंडलिंग और सभी टूलिंग का ख्याल रखता था इसलिए मुझे उपनाम जोड़ना पड़ा।

sourcesoft 23 अग॰ 2019

👍2

यदि आप मेरे जैसे लर्न या मोनोरेपो का उपयोग कर रहे हैं, तो अपने वेबपैक समाधान कॉन्फ़िगरेशन में इस तरह sth जोड़ें
...
    alias: {
      'react-dom': 'path/to/main-package/node_modules/react-dom',
      react: 'path/to/main-package/form/node_modules/react',
  }
...
यदि आप इसे स्टोरीबुक में प्राप्त कर रहे हैं, तो इसे वहां कस्टम वेबपैक कॉन्फ़िगरेशन में भी जोड़ें।
एक साइड नोट, यदि यह आपके लिए समस्या को हल करता है, तो आपके वेबपैक निर्मित बंडल में प्रतिक्रिया के 2 संस्करण भी थे (इसका निरीक्षण करने के लिए वेबपैक बंडल विश्लेषक की तरह sth का उपयोग करें)। मेरे मामले में, मेरे मोनोरेपो में एक अलग पैकेज था जो बंडलिंग और सभी टूलिंग का ख्याल रखता था इसलिए मुझे उपनाम जोड़ना पड़ा।

धन्यवाद, इससे मेरी समस्या हल हो गई, मैंने अपने docs डिक्ट्री में एक और रिएक्ट स्थापित किया, जिससे यह समस्या हुई।

mysteryven 3 सित॰ 2019

मैं सिर्फ हुक को बहुत ही बुनियादी तरीके से बुलाता हूं।
import React, {useState} from 'react'
import ReactDOM from 'react-dom'

function App() {
const [number, setNumber] = useState(0);
const increase = () => {
    setNumber(number+1);
}
return <div>
<span>Counting: {number}</span>
<button onClick={increase} >Increase</button>
</div>
}

const selector = document.getElementById('app');

ReactDOM.render(<App />, selector);
मुझे त्रुटि मिलती है
Hooks can only be called inside of the body of a function component.
मैंने स्केच से बहुत सारे रिएक्ट प्रोजेक्ट बनाए हैं लेकिन मुझे यह त्रुटि पहले कभी नहीं मिली।
मैं हुक के सभी नियमों को समझता हूं।
मैं डिबग करने और इसे हल करने के लिए 12 घंटे का समय बिताता हूं, लेकिन दुर्भाग्य से मैं नहीं कर सकता, अब मुझे कोई जानकारी नहीं है।
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // I get true

आपके पास रिएक्ट और रिएक्ट डोम के बेमेल संस्करण हो सकते हैं।
प्रतिक्रिया संस्करण में परिवर्तन करके मेरे पास एक ही समस्या हल हो गई थी

jafartke 11 सित॰ 2019

👎3

जब मैं अपने घटक को कार्यात्मक से क्लासफुल घटक में बदलने की कोशिश करता हूं तो मुझे इस समस्या का सामना करना पड़ता है और मुझे यह त्रुटि भी मिलती है, इसलिए इस त्रुटि के बारे में मेरा समाधान यहां है आशा है कि यह आपके मामले में भी मदद करता है।

इस मामले में उच्च क्रम घटक का उपयोग करने का प्रयास करें

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'प्रोप-प्रकार' से प्रोपटाइप आयात करें;
आयात { withStyles } '@material-ui/styles' से;
'@ सामग्री-यूआई/कोर/बटन' से आयात बटन;

कॉन्स्ट स्टाइल = थीम => ({
जड़: {
पृष्ठभूमि: 'रैखिक-ढाल (45deg, #FE6B8B 30%, #FF8E53 90%)',
सीमा: 0,
सीमा त्रिज्या: ३,
बॉक्सशैडो: '0 3px 5px 2px आरजीबीए (255, 105, 135, .3)',
रंग सफेद',
ऊंचाई: 48,
पैडिंग: '0 30px',
},
});

क्लास हायरऑर्डरकंपोनेंट रिएक्ट का विस्तार करता है। कॉम्पोनेंट {

प्रस्तुत करना(){
कास्ट {कक्षाएं} = this.props;
वापसी (

HighOrderComponent.propTypes = {
कक्षाएं: PropTypes.object.isRequired,
};

स्टाइल्स (शैलियों) (हायरऑर्डर कॉम्पोनेंट) के साथ डिफ़ॉल्ट निर्यात करें;

abdulmoizshaikh 20 सित॰ 2019

मैं प्रतिक्रिया और एफडब्ल्यूआईडब्ल्यू सीख रहा हूं, मैंने ऐप() को इस तरह प्रस्तुत करने का प्रयास करते समय भी समस्या देखी:

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

मेरा तर्क यह था कि <App /> केवल ऐप घटक डालने के लिए एक मिनी टेम्पलेट तैयार करेगा, इसलिए इसके बजाय मैंने सीधे ऐप को कॉल किया, जो जेएसएक्स टेम्पलेट देता है।

हालाँकि, एक बार जब मैंने सेटस्टेट () का उपयोग करना शुरू कर दिया, तो यह उपरोक्त समस्या का कारण बना। <App /> बदलने से यह हल हो गया।

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

नोट: $ सिर्फ एक सहायक है const $ = sel => document.querySelector(sel);

fabd 9 अक्तू॰ 2019

उन लोगों के लिए जो सभी प्रस्तावित सुधारों का निवारण करने के बाद भी इस त्रुटि का सामना कर रहे हैं, दोबारा जांच लें कि आप अपना प्रोजेक्ट चलाते समय सही निर्देशिका आवरण का उपयोग कर रहे हैं। मुझे अपने पीसी पर समस्याएँ बनी रहीं और पता चला कि यही कारण है।

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

dbeaudway 13 अक्तू॰ 2019

react-dom को संस्करण 16.10.2 अपडेट करने के बाद परीक्षण चलाते समय मुझे वह त्रुटि मिल रही थी। enzyme-adapter-react-16 को 1.15.1 संस्करण में अपग्रेड करने से यह ठीक हो गया

joselcc 17 अक्तू॰ 2019

अरे यार मैं प्रतिक्रिया v16.10.2 पर हूँ। मैंने इससे लड़ने की कोशिश में पहले ही कुछ घंटे बिताए लेकिन मैं अब इस लड़ाई को जारी नहीं रखूंगा क्योंकि मेरे पास करने के लिए और भी महत्वपूर्ण चीजें हैं। मैं अभी के लिए प्रतिक्रिया-अंतिम-फॉर्म 4.1.0 पर रहने के साथ ठीक हूं। क्या हताशा है।

rockneverdies55 18 अक्तू॰ 2019

इससे मेरी समस्या हल हो गई:

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

DanielAllt 6 नव॰ 2019

निर्भरता को अपग्रेड करने और इसे कम करने की कोशिश में घंटों बिताए जाने के बाद मुझे अभी भी यही समस्या है।

npm ls react ने निम्नलिखित दिखाया:

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

react और react-dom को 16.9.0 पिन करने से त्रुटि दूर हो गई क्योंकि इससे क्षणिक निर्भरता दूर हो गई। मैंने पहले सोचा था कि इसका मतलब 16.10.0 में एक प्रतिगमन था जब तक मैंने देखा कि समस्या 16.8.6 में भी हुई थी (क्योंकि क्षणिक निर्भरता स्पष्ट रूप से पिन की गई थी)।

यार्न के resolutions फ़ील्ड को सही ढंग से काम करने के लिए थोड़ा मुश्किल है, विशेष रूप से लर्न मोनोरेपोस में, लेकिन रिएक्ट की दूसरी प्रति को समाप्त करने से चाल चली। मुझे अभी भी पता नहीं है कि यह बंडल में कैसे समाप्त हुआ, लेकिन यही समस्या का कारण बना।

मैं अब @storybook/addon-info पूरी तरह से छोड़ने पर विचार कर रहा हूं क्योंकि यह एक अन्य निर्भरता पर भी निर्भर करता है जिसकी प्रतिक्रिया 0.14 (हां) पर निर्भरता है, हालांकि उस किसी ने अभी तक कोई समस्या नहीं पैदा की है।

संपादित करें: रिकॉर्ड के लिए, मैंने इस पर लगभग चार घंटे बिताए क्योंकि मुझे डुप्लिकेट को खत्म करने के लिए resolutions नहीं मिला और यह मानने से इनकार कर दिया कि रिएक्ट की कॉपी भी बंडल में मिल गई है। मेरे जैसा मत बनो। अपनी क्षणिक प्रतिक्रियाएँ घटाएँ।

pluma 19 नव॰ 2019

ऐसा तब होता है जब मैं एचओसी के अंदर हुक का उपयोग करता हूं।
const HOC = Component => {
  return (props) => {
    const [val] = useState();
    return <div>{val}</div>
  }
}

मैं भी इसी मुद्दे का सामना कर रहा हूं।

क्या आप कृपया मेरा मार्गदर्शन कर सकते हैं?

Neeraj-swarnkar 4 दिस॰ 2019

👍5

@ नीरज-स्वर्णकार अपनी समस्या को कम से कम उदाहरण में कम करने का प्रयास करें जो अभी भी त्रुटि में परिणाम देता है।

यह लगभग हमेशा दो समस्याओं में से एक को उबालता है:

आपको लगता है कि आप एक घटक पास कर रहे हैं लेकिन यह वास्तव में एक रेंडर प्रोप है (यानी "घटक" को एक फ़ंक्शन के रूप में बुलाया जा रहा है, घटक नहीं)
आपने किसी तरह अपनी क्षणिक निर्भरता के माध्यम से रिएक्ट के एक से अधिक संस्करणों को बंडल किया है और वे एक-दूसरे के पैर की उंगलियों पर कदम रखते हैं

अफसोस की बात है कि इस मामले में स्टैक के निशान भ्रामक होते हैं लेकिन त्रुटि संदेश आम तौर पर आपको सही विचार देते हैं।

pluma 4 दिस॰ 2019

@ नीरज-स्वर्णकार अपनी समस्या को कम से कम उदाहरण में कम करने का प्रयास करें जो अभी भी त्रुटि में परिणाम देता है।
यह लगभग हमेशा दो समस्याओं में से एक को उबालता है:
आपको लगता है कि आप एक घटक पास कर रहे हैं लेकिन यह वास्तव में एक रेंडर प्रोप है (यानी "घटक" को एक फ़ंक्शन के रूप में बुलाया जा रहा है, घटक नहीं)
आपने किसी तरह अपनी क्षणिक निर्भरता के माध्यम से रिएक्ट के एक से अधिक संस्करणों को बंडल किया है और वे एक-दूसरे के पैर की उंगलियों पर कदम रखते हैं
अफसोस की बात है कि इस मामले में स्टैक के निशान भ्रामक होते हैं लेकिन त्रुटि संदेश आम तौर पर आपको सही विचार देते हैं।

सूचक के लिए धन्यवाद, क्या आप मुझे मार्गदर्शन कर सकते हैं कि क्या बेहतर किया जा सकता है या इसे ठीक करने के लिए मुझे क्या करना चाहिए?

Neeraj-swarnkar 4 दिस॰ 2019

@ नीरज-स्वर्णकार कोड पर टिप्पणी करने और इसे प्लेसहोल्डर के साथ बदलने का प्रयास करें जब तक कि आपके पास एक न्यूनतम उदाहरण न हो जो अभी भी एक ही त्रुटि में परिणाम देता है।

यदि आपके पास कोई सहकर्मी या सहकर्मी नहीं है, तो आप इसे और अधिक डीबग करने में आपकी सहायता करने के लिए कह सकते हैं, देखें कि क्या आपको कोई स्थानीय बैठक, अध्ययन समूह या कोई कंपनी मिल सकती है जो कार्यालय का समय खोलती है और उनसे मदद मांगती है। यदि सब कुछ विफल हो जाता है, तो इसे देखने के लिए किसी को किराए पर लें।

pluma 6 दिस॰ 2019

मेरी लाइब्रेरी और क्रिएट-रिएक्शन-ऐप एक-दूसरे के सापेक्ष हैं और मैं npm लिंक का उपयोग कर रहा हूं
क्या आपने यह भाग पढ़ा?
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react
यह सीधे link कार्यप्रवाह को संबोधित करता है:

यह काम एक आकर्षण की तरह है!

ladifire 30 दिस॰ 2019

मेरी लाइब्रेरी और क्रिएट-रिएक्शन-ऐप एक-दूसरे के सापेक्ष हैं और मैं npm लिंक का उपयोग कर रहा हूं
क्या आपने यह भाग पढ़ा?
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react
यह सीधे link कार्यप्रवाह को संबोधित करता है:

यह काम एक आकर्षण की तरह है!

ladifire 30 दिस॰ 2019

मैंने कल इस समस्या को हल किया, इसने मुझे आधे महीने तक परेशान किया। कल मैंने कोड को बहुत कम कर दिया (बस जोड़ें

ZeldaYuan 14 जन॰ 2020

मैं इसे परिवर्तन द्वारा हल करता हूं
                <Route key={index} render={route.component} path={route.path} />
प्रति
                <Route key={index} component={route.component} path={route.path} />
लेकिन मुझे नहीं पता क्यों :(

यह मेरे लिए काम करता है, लेकिन मुझे नहीं पता कि क्यों।

qtwwyl 15 जन॰ 2020

यदि आप यहां इसलिए आ रहे हैं क्योंकि आप सामग्री UI से HOC + makeStyles का उपयोग कर रहे हैं,
यहाँ जवाब है: https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com

benlinton 29 जन॰ 2020

मैं इसे परिवर्तन द्वारा हल करता हूं
                <Route key={index} render={route.component} path={route.path} />
प्रति
                <Route key={index} component={route.component} path={route.path} />
लेकिन मुझे नहीं पता क्यों :(
यह मेरे लिए काम करता है, लेकिन मुझे नहीं पता कि क्यों।

"घटक" प्रोप एक प्रतिक्रिया घटक की अपेक्षा करता है, "रेंडर" प्रोप एक फ़ंक्शन की अपेक्षा करता है जिसे फ़ंक्शन के रूप में बुलाया जाएगा। फ़ंक्शन घटक घटक होते हैं, यदि वे हुक का उपयोग करते हैं तो उन्हें सामान्य कार्यों के रूप में लागू करना काम नहीं करता है और आम तौर पर यह एक अच्छा विचार नहीं है।

pluma 30 जन॰ 2020

मैं इसे परिवर्तन द्वारा हल करता हूं
                <Route key={index} render={route.component} path={route.path} />
प्रति
                <Route key={index} component={route.component} path={route.path} />
लेकिन मुझे नहीं पता क्यों :(

धन्यवाद, प्रिय, इसने मेरे लिए काम किया, फिर भी, मैं उलझन में हूँ, क्यों?

jaisonjjames 17 फ़र॰ 2020

@jaisonjjames मेरा जवाब देखें। यदि आपको अंतर समझने में परेशानी हो तो StackOverflow पर कुछ स्पष्टीकरण दिए गए हैं: https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render

pluma 18 फ़र॰ 2020

मेरे मामले में, मेरे पास घटक के बाहर let match = useRouteMatch("/user/:id"); , जो प्रतिक्रिया-राउटर से एक हुक है, इसलिए त्रुटि सही थी।

Rolando-Barbella 27 फ़र॰ 2020

से

प्रति

gabrielyangzon 5 मार्च 2020

👍4 👎2 🎉1

से

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

प्रति

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

ammoradi 28 मार्च 2020

😕1 👎1 👍1

मेरे मामले में मैं window ऑब्जेक्ट से एक पुस्तकालय की बात कर रहा था जिसमें एक अलग प्रतिक्रिया संस्करण था। मैंने वेबपैक से externals कॉन्फ़िगरेशन विकल्प का उपयोग करके समाप्त किया जिससे मुझे उस लाइब्रेरी के react और react-dom को संदर्भित करने में मदद मिली और त्रुटि दूर हो गई।

इसलिए मेरा मानना है कि मुझे यह त्रुटि इसलिए मिल रही थी क्योंकि You might have more than one copy of React in the same app ।

AbreezaSaleem 15 अप्रैल 2020

मेरे मामले में मैं window ऑब्जेक्ट से एक पुस्तकालय की बात कर रहा था जिसमें एक अलग प्रतिक्रिया संस्करण था। मैंने वेबपैक से externals कॉन्फ़िगरेशन विकल्प का उपयोग करके समाप्त किया जिससे मुझे उस लाइब्रेरी के react और react-dom को संदर्भित करने में मदद मिली और त्रुटि दूर हो गई।
इसलिए मेरा मानना है कि मुझे यह त्रुटि इसलिए मिल रही थी क्योंकि You might have more than one copy of React in the same app ।

@AbreezaSaleem आपने इसे कैसे पूरा किया? मुझे एक ही समस्या है, एक पुस्तकालय का उपयोग करना जिसमें react बाहरी के रूप में है, किसी भी तरह एक अलग संस्करण के रूप में दिखाई दे रहा है ... मैंने externals: [ 'react' ] , externals: { react: 'react' } और externals: { react: 'React' } , परिणाम हमेशा एक जैसा होता है...

Myrdden 18 अप्रैल 2020

मैंने इसे पुन: पेश करने के लिए कुछ हद तक न्यूनतम उदाहरण बनाया है। मेरे मामले में इलेक्ट्रॉन-वेबपैक और प्रतिक्रिया-ड्रॉपज़ोन के साथ इलेक्ट्रॉनजेएस पर समस्या होती है

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

JuanIrache 23 अप्रैल 2020

एक ही/एकल प्रतिक्रिया उदाहरण को इंगित करने के लिए एक अच्छा वेबपैक कॉन्फ़िगरेशन समाधान है। यह ऐप के अंदर एक संकल्प जोड़ना था जो 'एनपीएम मॉड्यूल होने के लिए' का उपयोग कर रहा है।

webpack.config.js के अंदर, प्रतिक्रिया करने के लिए उपनाम जोड़ें - इसलिए यह उस एक प्रतिक्रिया उदाहरण का उपयोग करता है:

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

Yolantele 8 मई 2020

👍3 🚀2 ❤1

लर्न इस समस्या का कारण बन सकता है, जैसा कि मैंने आज (लर्नेड?) सीखा है।

lerna उपयोगकर्ता, यदि आप एक घटक पुस्तकालय विकसित कर रहे हैं, तो अपने पुस्तकालय की निर्भरता में प्रतिक्रिया को शामिल न करें, इसे अपने सहकर्मी निर्भरता में और @ प्रकार/प्रतिक्रिया को अपनी निर्भरता में शामिल करें।

rettgerst 2 जून 2020

लर्न का उपयोग करने वाले किसी भी व्यक्ति के लिए, एक पैकेज में परीक्षण चलाते समय आपको इस समस्या का सामना करना पड़ सकता है, जहां कोड दूसरे पैकेज में घटकों का संदर्भ देता है।

इस मामले में हमने जिस समस्या का अनुभव किया, वह प्रतिक्रिया के कारण कल्पना में आयात की जा रही थी, और घटक ट्री में एक घटक में आयात किया जा रहा था जो सामग्री UI के withStyles का उपयोग कर रहा था, जिसे सामग्री UI में हुक का उपयोग करके कार्यान्वित किया जाता है।

ऐसा लगता है कि प्रतिक्रिया आंतरिक रूप से ReactCurrentDispatcher.current चर में राज्य का प्रबंधन करती है, और यह प्रतिक्रिया के एक उदाहरण में सेट हो जाती है, लेकिन प्रतिक्रिया के दूसरे उदाहरण में उपयोग की जाती है - जब यह खाली होती है, तो यह Invalid hook call ... फेंकता है

हम बिल्ड समय पर क्रिएट रिएक्ट ऐप के वेबपैक कॉन्फिगरेशन को ओवरराइड करने के लिए पहले से ही

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

हालांकि, इस वेबपैक ओवरराइड का उपयोग केवल निर्माण समय पर किया जाता है - परीक्षण चलाते समय, कोड नहीं बनाया जाता है, लेकिन स्रोत से त्वरित किया जाता है - इसलिए हमारा समाधान निर्दिष्ट करने के लिए हमारे craco.config.js में क्रेकोअलियास का उपयोग करना था। परीक्षण के दौरान प्रतिक्रिया पथ:

  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          // We need to alias react to the one installed in the desktop/node_modules
          // in order to solve the error "hooks can only be called inside the body of a function component"
          // which is encountered during desktop jest unit tests,
          // described at https://github.com/facebook/react/issues/13991
          // This is caused by two different instances of react being loaded:
          // * the first at packages/desktop/node_modules (for HostSignUpDownloadComponent.spec.js)
          // * the second at packages/components/node_modules (for packages/components/Modal)
          react: './node_modules/react',
        },
      },
    },
  ],

jasondarwin 4 जून 2020

👍1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

सबसे उपयोगी टिप्पणी

सभी 61 टिप्पणियाँ

संबंधित मुद्दों