रिएक्ट हुक "यूज़स्टैट" को फंक्शन "ऐप" में कहा जाता है जो न तो रिएक्ट फ़ंक्शन घटक है और न ही कस्टम रिएक्ट हुक फ़ंक्शन

Question

मैं एक साधारण समस्या के लिए प्रतिक्रिया हुक का उपयोग करने की कोशिश कर रहा हूं

const [personState,setPersonState] = useState({ DefinedObject });

निम्नलिखित निर्भरता के साथ।

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
}

लेकिन मुझे अभी भी निम्न त्रुटि मिल रही है:

./src/App.js

पंक्ति 7:
रिएक्ट हुक "यूजस्टैट" को फंक्शन "एप" में कहा जाता है, जो न तो रिएक्ट फंक्शन कंपोनेंट है और न ही कस्टम रिएक्ट हुक फंक्शन रिएक्शन-हुक / रूल्स-ऑफ-हुक।

रेखा 39:
'राज्य' परिभाषित नहीं है
कोई undef

प्रत्येक त्रुटि के बारे में अधिक जानने के लिए कीवर्ड खोजें।

घटक कोड नीचे है:

import React, {useState} from 'react'; 
import './App.css'; 
import Person from './Person/Person'; 

const app = props => { 
    const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'} ], }); 
    return (
        <div className="App"> 
            <h2>This is react</h2> 
            <Person name={personState.person[1].name} age="27"></Person>
            <Person name={personState.person[2].name} age="4"></Person> 
        </div> ); 
    };
    export default app;

व्यक्ति का घटक

import React from 'react'; 

const person = props => { 
    return( 
        <div>
            <h3>i am {props.name}</h3>
            <p>i am {props.age} years old</p>
            <p>{props.children}</p>
        </div> 
    )
};

export default person; 

Comments

क्या आप अपना घटक कोड साझा कर सकते हैं?

— सचिन

आयात प्रतिक्रिया, 'प्रतिक्रिया' से {useState}; आयात './App.css'; आयात व्यक्ति से './Person/Person'; const app = props => {const [personState, setPersonSate] = useState ({व्यक्ति: [{name: 'bishnu', उम्र: '32 '}, {name:' rasmi ', उम्र: '27'}, {name : 'fretbox', आयु: '4'}],}); वापसी (<div className = "App"> <h2> यह प्रतिक्रिया है </ h2> <व्यक्ति का नाम = {personState.person [1] .name} आयु = "27"> </ व्यक्ति> <व्यक्ति का नाम = "मेरा नाम" .person [2] .name} उम्र = "4"> </ व्यक्ति> </ div>); }; निर्यात डिफ़ॉल्ट एप्लिकेशन;

— बिशु

व्यक्ति घटक: - 'प्रतिक्रिया' से आयात प्रतिक्रिया; const person = (props) => {return (<div> <h3> i am {props.name} </ h3> <p> i am {props.age} साल पुराना </ p> <p> {props। बच्चे} </ p> </ div>)} डिफ़ॉल्ट व्यक्ति निर्यात करें;

— बिष्णु

यह इस तरह के साझा कोड को पढ़ने के लिए एक नरक है, दूसरों का सम्मान करें

— एलेक्सनिकोव

मुझे मैक्सिमिलियन रिएक्ट कोर्स से भी यही समस्या थी।

— GDG612

Answer 1

'ऐप' को भुनाने की कोशिश करें

const App = props => {...}

export default App;

प्रतिक्रिया में, घटकों को पूंजीकृत करने की आवश्यकता होती है, और कस्टम हुक के साथ शुरू करने की आवश्यकता होती है use।

Comments

यह एक ऐप में बग को खोजने के लिए कुछ कठिन है, मुझे लगता है कि इस सकारात्मकता को इंगित करने के लिए त्रुटि संदेश में एक और टिप्पणी जोड़ी जानी चाहिए।

— मार्क ई

इसका कारण यह है कि हुक ईएसलिंट प्लगइन के नियमों में , यह देखने के लिए एक जांच है कि क्या कोई घटक या फ़ंक्शन नाम मान्य है Checks if the node is a React component name. React component names must always start with a non-lowercase letter.:।

— HGomez

App में A को कैपिटल करना मेरे लिए काम करता है ... लेकिन मैं यह नहीं सोच रहा हूं कि udemy कोर्स में अधिकतम यह त्रुटि क्यों नहीं हुई?

— आशीष शर्मा Sharma ’

एक ही सवाल "अधिकतम त्रुटि क्यों नहीं हुई? मैंने" ऐप "को" ऐप "में बदल दिया और अब यह मेरे लिए काम करता है!

— Forhad

आप भगवान हैं। मैं अभी एक मुश्किल दिन हो सकता है। धन्य हो

— kipruto

Answer 2

मुझे ऐसा लगता है कि हम उडेमी में भी ऐसा ही कोर्स कर रहे हैं।

यदि हां, तो बस पूंजीकरण करें

const app

सेवा

const App

के रूप में अच्छी तरह से करते हैं

export default app

सेवा

export default App

ये मेरे लिए अच्छी तरह से काम करता है।

Comments

हां मुझे लगता है कि हम में से 3 एक ही कोर्स कर रहे हैं। यह मामला संवेदनशील क्यों है?

— मेल्टिंगडॉग

इसे सही उत्तर के रूप में चिह्नित किया जाना चाहिए। डिफ़ॉल्ट रूप से, "मुख्य घटक" नाम जरूरी पूंजीकृत होना चाहिए। पूंजीकृत नामों के साथ अपने घटकों को आयात करना भी याद रखें। गलत:; ./Compo ’से आयात कम्पो; अधिकार: ', ./Compo' से कम्पो आयात करें; प्रतिक्रिया के रूप में पहचान की घटकों के रूप में बड़े JSX टैग पहचानता है।

— मार्कोस आर

यह मामला क्यों है?

— किपरूटो जूल

Answer 3

जहां तक ​​मुझे पता है कि इस पैकेज में एक लिंटर शामिल है। और इसके लिए आपको जरुरी है कि खेमेबंदी पूंजीगत चरित्र से शुरू होनी चाहिए। कृपया यह जाँचें।

हालांकि मेरे लिए यह दुखद है।

Comments

धन्यवाद एक आकर्षण की तरह काम किया @alerya

— karthickeyan

मेरा समय बचाने के लिए धन्यवाद।

— हरसिमर

Answer 4

फ़ंक्शन नाम में पहले अक्षर कैपिटल का उपयोग करें।

function App(){}

Comments

"सबसे पहले, आपको अपने घटकों के FirstLetter को अपरकेस करने की आवश्यकता है, आपके मामले में ऐप ऐप होना चाहिए और व्यक्ति को व्यक्ति होना चाहिए।" किसी ने पहले ही लिखा था ...

— पोचमर्निक

इसका उत्तर दिया जा चुका है और इसे उत्तर के रूप में चिह्नित किया जाना चाहिए। सरल समाधान सही समझाया।

— user2112618

Answer 5

Const app के बजाय const ऐप का उपयोग करें

Answer 6

बस अपने ऐप के नाम को भुनाने की कोशिश करें

const App = props => {...}

export default App;

Comments

क्या आपके पास दस्तावेज़ का शीर्षक है?

— जेकब बेट्सी

इसके कार्य, धन्यवाद

— देव रुपिंदर

Answer 7

आपको यह त्रुटि मिल रही है: "रिएक्ट हुक" यूज़स्टैट "को फंक्शन" ऐप "कहा जाता है जो न तो रिएक्ट फ़ंक्शन घटक है और न ही कस्टम रिएक्ट हुक फ़ंक्शन"

समाधान: आपको मूल रूप से फ़ंक्शन को कैपिटल करने की आवश्यकता है।

उदाहरण के लिए:

const Helper =()=>{}

function Helper2(){}

Answer 8

आपके फ़ंक्शन का पहला वर्ण अपरकेस होना चाहिए

Comments

वाह, मैं हमेशा यह भूल जाता हूं। धन्यवाद :)

— डोजेनिस एच। १is

Answer 9

मेरी भी यही समस्या थी। "ऐप" में "A" को कैपिटलाइज़ करना मुद्दा था। इसके अलावा, यदि आप निर्यात करते हैं: export default App;सुनिश्चित करें कि आप "ऐप" के समान नाम का भी निर्यात करते हैं।

Answer 10

अवयवों को बड़े अक्षरों से शुरू करना चाहिए। निर्यात करने के लिए लाइन में पहला अक्षर बदलने के लिए भी याद रखें!

Comments

आपका प्रश्न उत्तर की तरह प्रतीत नहीं होता है। 50 प्रतिनिधि तक पहुंचने के बाद आप प्रश्नों पर टिप्पणी कर पाएंगे। यदि आप इस सवाल का जवाब है एक जवाब है, यह सुधार सकते हैं। उदाहरण के लिए, घटकों को बड़े अक्षरों से क्यों शुरू करना चाहिए? साथ ही, अन्य उत्तरों ने पहले ही कहा है कि, क्या आप कुछ नया दे रहे हैं?

— लुक

Answer 11

क्या आपके पास सही आयात है?

import React, { useState } from 'react';

Answer 12

रिएक्ट घटकों के नामों को पूंजीकृत किया जाना चाहिए और कस्टम हुक कार्यों को उपयोग के साथ शुरू करना चाहिए प्रतिक्रिया हुक फ़ंक्शन के रूप में पहचानने के कीवर्ड के ।

इसलिए, अपने ऐप घटकों को ऐप में कैपिटल करें

Answer 13

मेरे पास एक ही मुद्दा था, लेकिन ऐप के साथ नहीं। मेरे पास एक कस्टम वर्ग था, लेकिन फ़ंक्शन नाम शुरू करने के लिए एक लोअरकेस अक्षर का उपयोग किया और त्रुटि भी प्राप्त की।

फ़ंक्शन नाम का पहला अक्षर और निर्यात लाइन को CamelCase में बदल दिया और त्रुटि हो गई।

मेरे मामले में अंतिम परिणाम कुछ इस तरह था:

function Document() {
....
}
export default Document;

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

Answer 14

समाधान सरल, सही "ऐप" है और अपरकेस में पहले चरित्र के साथ "ऐप" लिखें।

Comments

StackOverflow (Upvoted) में आपका स्वागत है। कृपया कुछ कोड डालें और प्रश्नों के उत्तर दें।

— मेहदी येगनेह

Answer 15

ऐप को कैपिटलाइज़ करें ऐप ज़रूर काम करेगा।

Answer 16

JSX में, लोअर-केस टैग नाम html देशी घटक के रूप में माना जाता है। प्रतिक्रिया को घटक के रूप में फ़ंक्शन को पहचानने के लिए प्रतिक्रिया करने के लिए, नाम को बड़ा करने की आवश्यकता है।

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

Answer 17

इसे बदलें

export default app;

इसके साथ

export default App;

Answer 18

फ़ंक्शन नाम कैपिटल बनाएं। यह मेरे लिए काम करता है।

export default function App() { }

Answer 19

React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

निम्न त्रुटि के लिए, पहले अक्षर जैसे घटक को कैपिटलाइज़ करें, और निर्यात को भी।

const App  = props => {
...}
export default App;

Answer 20

युकी जैसा कि पहले से ही बताया गया है, समाधान, घटक नाम को बड़ा करना है। यह ध्यान रखना महत्वपूर्ण है कि न केवल "डिफ़ॉल्ट" ऐप घटक को पूंजीकृत करने की आवश्यकता है, बल्कि सभी घटक हैं:

const Person = () => {return ...};

export default Person;

यह eslint-plugin-react-hooks पैकेज के कारण है, विशेष रूप से isComponentName () फ़ंक्शन के अंदर RulesOfHooks.js स्क्रिप्ट।

आधिकारिक स्पष्टीकरण हुक्स पूछे जाने वाले प्रश्न से :

हम एक ESLint प्लगइन प्रदान करते हैं जो बग से बचने के लिए हुक के नियमों को लागू करता है। यह मानता है कि हुक के बाद "उपयोग" और पूंजी अक्षर से शुरू होने वाला कोई भी कार्य। हम पहचानते हैं कि यह अनुमान सही नहीं है और कुछ गलत सकारात्मक हो सकते हैं, लेकिन पारिस्थितिकी तंत्र के व्यापक सम्मेलन के बिना, हुक को अच्छी तरह से काम करने का कोई तरीका नहीं है - और लंबे समय तक लोग हुक को अपनाने या सम्मेलन का पालन करने से लोगों को हतोत्साहित करेंगे।

Answer 21

सबसे पहले, आप अपने घटकों के FirstLetter को अपरकेस में, आपके मामले में जरूरत एप्लिकेशन होना चाहिए अनुप्रयोग और व्यक्ति होना चाहिए व्यक्ति ।

मैंने समस्या खोजने की उम्मीद में आपके कोड को कॉपी करने की कोशिश की। चूंकि आपने साझा नहीं किया था कि आप ऐप घटक को कैसे कॉल करते हैं, इसलिए मुझे इस मुद्दे पर परिणाम के लिए केवल 1 तरीका दिखाई दे सकता है।

यह CodeSandbox में लिंक है: अमान्य हुक कॉल ।

क्यों? नीचे दिए गए कोड की वजह से जो गलत है:

ReactDOM.render(App(), rootElement);

इसे होना चाहिए था:

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

अधिक जानकारी के लिए, आपको हुक - रीक्ट का नियम पढ़ना चाहिए

उम्मीद है की यह मदद करेगा!

Answer 22

कार्यात्मक घटक नाम / प्रतिक्रिया हुक कस्टम घटकों को परिभाषित करने के लिए बड़े अक्षर का उपयोग करें। "const 'ऐप' const 'ऐप' होना चाहिए।

App.js

import React, { useState } from 'react';
import { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';

const App = props => {
  const [personState, setPersonState] = useState({
    persons : [
          {name: 'a', age: '1'},
          {name: 'b', age: '2'},
          {name: 'c', age: '3'}
    ]
  });

    return (
      <div>
     <Person name = {personState.persons[0].name} age={personState.persons[0].age}> First </Person>
     <Person name = {personState.persons[1].name} age={personState.persons[1].age}> Second </Person>
     <Person name = {personState.persons[2].name} age={personState.persons[2].age}> Third </Person>    
    );
};
export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        <div>
<p> My name is {props.name} and my age is {props.age}</p>
<p> My name is {props.name} and my age is {props.age} and {props.children}</p>
<p>{props.children}</p>
        </div>
)
};

[ReactHooks] [useState] [ReactJs]

Answer 23

स्टेप -1: फाइल का नाम src / App.js को src / app.js में बदलें

स्टेप -2: "अपडेट के लिए app.js के लिए आयात" पर "हां" पर क्लिक करें।

स्टेप -3: सर्वर को फिर से शुरू करें।

Answer 24

जब भी कोई रिएक्ट फंक्शनल कंपोनेंट के साथ काम कर रहा हो, तो इन रिएक्ट हूक की त्रुटियों से बचने के लिए अप्पेरकेस में कंपोनेंट के नाम का पहला अक्षर हमेशा रखें।

आपके मामले में, आपने घटक का नाम दिया है app, जिसे बदला जाना चाहिए App, जैसा कि मैंने ऊपर कहा था, रिएक्ट हुक त्रुटि से बचने के लिए।

Answer 25

        import React, { useState } from "react"

    const inputTextValue = ({ initialValue }) => {
        const [value, setValue] = useState(initialValue);
        return {
            value,
            onChange: (e) => { setValue(e.target.value) }
        };
    };

    export default () => {
        const textValue = inputTextValue("");
        return (<>
            <input {...textValue} />
        </>
        );
    }

/*"Solution I Tired Changed Name of Funtion in Captial "*/

    import React, { useState } from "react"

const InputTextValue = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);
    return {
        value,
        onChange: (e) => { setValue(e.target.value) }
    };
};

export default () => {
    const textValue = InputTextValue("");
    return (<>
        <input {...textValue} />
    </>
    );
}

Answer 26

एप्लिकेशन फ़ंक्शन में आपने गलत तरीके से शब्द को वर्तनी दी है setpersonSate, पत्र को गायब कर दिया है t, इस प्रकार यह होना चाहिए setpersonState।

त्रुटि :

const app = props => { 
    const [personState, setPersonSate] = useState({....

समाधान :

const app = props => { 
        const [personState, setPersonState] = useState({....

Answer 27

इसका कारण रिएक्ट हुक के लिए ESLint नियम है। यहां नियम का लिंक खोजें:

प्रतिक्रिया हुक के लिए ESLint नियम

अब तक, नियम को पंक्ति संख्या में वर्णित किया गया है। 44।

Answer 28

कार्यात्मक घटकों को बनाने के लिए तीर फ़ंक्शन का उपयोग न करें।

नीचे दिए गए उदाहरणों में से एक के रूप में करें:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

या

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

यदि आपको समस्या है "ref"(शायद छोरों में), तो समाधान का उपयोग करना है forwardRef():

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});

Comments

क्या आप अधिक व्याख्या कर सकते हैं, क्यों "कार्यात्मक घटकों को बनाने के लिए तीर फ़ंक्शन का उपयोग न करें।" ? - धन्यवाद

— जुआन

कुछ स्थितियों में उपयोग () के साथ समस्याओं से बचने के लिए, जैसे कि इस स्थिति में: codeandbox.io/s/usestate-error-f452s

— GilCarvalhoDev