React Hook "useState" wird in der Funktion "app" aufgerufen, die weder eine React-Funktionskomponente noch eine benutzerdefinierte React Hook-Funktion ist

147

Ich versuche, React Hooks für ein einfaches Problem zu verwenden

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

mit folgenden Abhängigkeiten.

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

aber ich erhalte immer noch den folgenden Fehler:

./src/App.js

Zeile 7:
React Hook "useState" wird in der Funktion "app" aufgerufen, die weder eine React-Funktionskomponente noch eine benutzerdefinierte React Hook-Funktion ist

Zeile 39:
'state' ist nicht
no-undef definiert

Suchen Sie nach den Schlüsselwörtern, um mehr über jeden Fehler zu erfahren.

Der Komponentencode ist unten:

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;

Personenkomponente

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; 
Bishnu
quelle
1
Können Sie Ihren Komponentencode freigeben?
Sachin
importiere React, {useState} von 'react'; import './App.css'; Person aus './Person/Person' importieren; const app = props => {const [personState, setPersonSate] = useState ({person: [{name: 'bishnu', age: '32 '}, {name:' rasmi ', age: '27'}, {name : 'fretbox', Alter: '4'}],}); return (<div className = "App"> <h2> Dies ist eine Reaktion </ h2> <Personenname = {personState.person [1] .name} age = "27"> </ Person> <Personenname = {personState .person [2] .name} age = "4"> </ Person> </ div>); }; Standard-App exportieren;
Bishnu
Personenkomponente: - Importieren Reagieren von 'Reagieren'; const person = (props) => {return (<div> <h3> ich bin {props.name} </ h3> <p> ich bin {props.age} Jahre alt </ p> <p> {props. Kinder} </ p> </ div>)} Standardperson exportieren;
Bishnu
5
Es ist eine Hölle, solchen geteilten Code zu lesen, andere zu respektieren
AlexNikonov
5
Ich hatte das gleiche Problem auch aus dem Maximilian React Kurs.
GDG612

Antworten:

335

Versuchen Sie, "App" wie groß zu schreiben

const App = props => {...}

export default App;

In React müssen Komponenten groß geschrieben werden und benutzerdefinierte Hooks müssen damit beginnen use.

YUKI
quelle
26
Dies ist ein schwer zu findender Fehler in einer App. Ich denke, der Fehlermeldung sollte ein weiterer Kommentar hinzugefügt werden, um auf diese Möglichkeit hinzuweisen.
Mark E
22
Der Grund dafür ist, dass im ESLint-Plugin "Rules of Hooks" überprüft wird, ob ein Komponenten- oder Funktionsname gültig ist : Checks if the node is a React component name. React component names must always start with a non-lowercase letter..
HGomez
11
A in App groß zu schreiben funktioniert für mich ... aber ich denke nicht, warum max diesen Fehler nicht in udemy Kurs bekommen hat?
Ashish Sharma
8
Gleiche Frage "Warum hat Max keinen Fehler bekommen? Ich habe" App "in" App "geändert und jetzt hat es für mich funktioniert!
Md Forhad Sarkar
Du bist von Gott gesandt. Ich könnte jetzt einen harten Tag haben. Sei gesegnet
kipruto
50

Ich habe das Gefühl, wir machen den gleichen Kurs in Udemy.

Wenn ja, schreiben Sie einfach das groß

const app

Zu

const App

Tun Sie so gut wie für die

export default app

Zu

export default App

Es funktioniert gut für mich.

Tuan Phan
quelle
5
Ja, ich denke, das bringt 3 von uns dazu, den gleichen Kurs zu machen. Warum wird zwischen Groß- und Kleinschreibung unterschieden?
MeltingDog
2
Dies sollte als richtige Antwort markiert werden. Standardmäßig MUSS der Name "Hauptkomponente" groß geschrieben werden. Denken Sie auch daran, Ihre Komponenten mit großgeschriebenen Namen zu importieren. FALSCH: Compo von './Compo' importieren; RECHTS: Compo aus './Compo' importieren; Als Reaktion erkennt großgeschriebene JSX-Tags als Reaktionskomponenten.
Marcos R
1
Warum ist es so senstiv?
Kipruto
35

Soweit ich weiß, ist in diesem Paket ein Linter enthalten. Und es erfordert, dass Ihre Komponente vom Kapitalcharakter ausgeht. Überprüfen Sie bitte das.

Für mich ist es jedoch traurig.

Alerya
quelle
Danke hat wie ein Zauber funktioniert @alerya
karthickeyan
Danke, dass du mir Zeit gespart hast.
Harsimer
22

Verwenden Sie im Funktionsnamen den Großbuchstaben. z.B:-

funciton App(){}     
Kelum Sampath Edirisinghe
quelle
"Zunächst müssen Sie den FirstLetter Ihrer Komponenten in Großbuchstaben schreiben. In Ihrem Fall sollte die App App und die Person Person sein." Jemand hat es bereits geschrieben ...
Pochmurnik
Dies wurde beantwortet und sollte als Antwort markiert werden. Einfache Lösung richtig erklärt.
user2112618
18

Verwenden Sie die const App anstelle der const app

Jyothishs Nair
quelle
14

Versuchen Sie einfach, Ihren App-Namen groß zu schreiben

const App = props => {...}

export default App;
Pratik Garg
quelle
Meinen Sie den Dokumenttitel?
Gakeko betsi
Es
funktioniert
12

Sie erhalten folgende Fehlermeldung: "React Hook" useState "wird in der Funktion" App "aufgerufen, die weder eine React-Funktionskomponente noch eine benutzerdefinierte React Hook-Funktion ist."

Lösung: Grundsätzlich müssen Sie die Funktion aktivieren.

Beispielsweise:

const Helper =()=>{}

function Helper2(){}

ASHISH RANJAN
quelle
11

Das erste Zeichen Ihrer Funktion sollte ein Großbuchstabe sein

Rubimbura Brian
quelle
Wow, das vergesse ich immer. Danke :)
Dzenis H.
10

Ich hatte das gleiche Problem. Es stellt sich heraus, dass die Großschreibung des "A" in "App" das Problem war. Auch wenn Sie exportieren: export default App;Stellen Sie sicher, dass Sie auch den gleichen Namen "App" exportieren.

Samceena
quelle
10

Komponenten sollten mit Großbuchstaben beginnen. Denken Sie auch daran, den ersten Buchstaben in der zu exportierenden Zeile zu ändern!

César O. Araújo
quelle
2
Ihre Frage scheint keine Antwort zu sein. Nach Erreichen von 50 Wiederholungen können Sie Fragen kommentieren. Wenn Sie Antwort ist eine Antwort, versuchen Sie es zu verbessern. Warum sollten Komponenten beispielsweise mit Großbuchstaben beginnen? Auch andere Antworten haben bereits gesagt, geben Sie etwas Neues?
Ender Look
5

Haben Sie den richtigen Import?

import React, { useState } from 'react';
Alexandre Mouyen
quelle
5

Namen von Reaktionskomponenten sollten groß geschrieben werden, und benutzerdefinierte Hook-Funktionen sollten mit dem Schlüsselwort use beginnen , um sie als React- Hook-Funktion zu identifizieren.

Aktivieren Sie also Ihre App- Komponenten in App

Ali Torki
quelle
3

Ich hatte das gleiche Problem, aber nicht mit der App. Ich hatte eine benutzerdefinierte Klasse, verwendete jedoch einen Kleinbuchstaben, um den Funktionsnamen zu starten, und erhielt auch den Fehler.

Der erste Buchstabe des Funktionsnamens und die Exportzeile wurden in CamelCase geändert und der Fehler ist verschwunden.

In meinem Fall war das Endergebnis so etwas wie:

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

Das hat mein Problem gelöst.

Terence Hinrichsen
quelle
2

Die Lösung ist einfach, korrekt "App" und schreiben Sie "App" mit dem ersten Zeichen in Großbuchstaben.

KleberDigital
quelle
Willkommen bei StackOverflow (Upvoted). Bitte geben Sie einen Code ein und beantworten Sie die Fragen.
Mehdi Yeganeh
2

Kapitalisieren Sie die App zu App wird sicherlich funktionieren.

Harshit Singhai
quelle
2

In JSX wird der Tag-Name in Kleinbuchstaben als native HTML-Komponente betrachtet. Um zu reagieren, erkennen Sie die Funktion als Reaktionskomponente, müssen Sie den Namen groß schreiben.

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

Ho Albert
quelle
2

Ersetzen Sie dies

export default app;

mit diesem

export default App;
Charix
quelle
2

Machen Sie den Funktionsnamen groß. Das funktioniert bei mir.

export default function App() { }
Akila K Gunawardhana
quelle
2
React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

Großschreiben Sie für den folgenden Fehler den ersten Buchstaben der Komponente wie und auch den Export.

const App  = props => {
...}
export default App;
Rohan Devaki
quelle
1

Die Lösung besteht, wie Yuki bereits betonte, darin, den Komponentennamen groß zu schreiben. Es ist wichtig zu beachten, dass nicht nur die "Standard" -App-Komponente aktiviert werden muss, sondern alle Komponenten:

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

export default Person;

Dies liegt am Paket eslint-plugin-react-hooks, insbesondere an der Funktion isComponentName () im Skript RulesOfHooks.js.

Offizielle Erklärung aus den Hooks-FAQs :

Wir bieten ein ESLint-Plugin, das Hook-Regeln erzwingt, um Fehler zu vermeiden. Es wird davon ausgegangen, dass jede Funktion, die mit "use" beginnt, und ein Großbuchstabe direkt danach ein Hook ist. Wir sind uns bewusst, dass diese Heuristik nicht perfekt ist und es möglicherweise einige Fehlalarme gibt, aber ohne eine ökosystemweite Konvention gibt es einfach keine Möglichkeit, Hooks gut funktionieren zu lassen - und längere Namen werden die Leute davon abhalten, Hooks zu übernehmen oder der Konvention zu folgen.

Nicolas Hevia
quelle
1

Zunächst einmal müssen Sie den first Ihrer Komponenten, in Ihrem Fall in Großbuchstaben App sollte App und Person soll Person .

Ich habe versucht, Ihren Code zu kopieren, in der Hoffnung, das Problem zu finden. Da Sie nicht mitgeteilt haben, wie Sie die App- Komponente aufrufen , kann ich nur einen Weg sehen, um dies zu einem Problem zu führen.

Dies ist der Link in CodeSandbox: Ungültiger Hook-Aufruf .

Warum? Wegen des folgenden Codes, der falsch ist:

ReactDOM.render(App(), rootElement);

Es hätte sein sollen:

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

Weitere Informationen finden Sie unter Regel der Haken - Reagieren

Hoffe das hilft!

Jojo Tutor
quelle
1

Verwenden Sie Großbuchstaben zum Definieren des Namens der Funktionskomponente / React Hooks für benutzerdefinierte Komponenten. "const 'app' sollte const 'App' sein.

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]

Nupur Agarwal
quelle
0

Schritt 1: Ändern Sie den Dateinamen src / App.js in src / app.js.

Schritt 2: Klicken Sie auf "Ja" für "Importe für app.js aktualisieren".

Schritt 3: Starten Sie den Server erneut.

Mohd. Shahnawaz Ali Choudhary
quelle
0

Behalten Sie bei der Arbeit mit einer React-Funktionskomponente immer den ersten Buchstaben des Namens der Komponente in Großbuchstaben, um diese React Hooks-Fehler zu vermeiden.

In Ihrem Fall haben Sie die Komponente benannt app, die wie oben erwähnt geändert werden sollte App, um den React Hook-Fehler zu vermeiden.

Aniruddh Mukherjee
quelle
0
        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} />
    </>
    );
}
Ashvin Singh
quelle
0

In der App-Funktion haben Sie das Wort falsch geschrieben setpersonSateund den Buchstaben verpasst t, daher sollte es so sein setpersonState.

Fehler :

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

Lösung :

const app = props => { 
        const [personState, setPersonState] = useState({....
Ankit Aggarwal
quelle
0

Dies liegt an der ESLint-Regel für React Hooks. Den Link der Regel finden Sie hier:

ESLint-Regel für React Hooks

Ab sofort ist die Regel in der Zeile Nr. 44.

Kamesh Kumar Singh
quelle
-3

Verwenden Sie keine Pfeilfunktion, um Funktionskomponenten zu erstellen.

Führen Sie eines der folgenden Beispiele aus:

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

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

Oder

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

Wenn Sie Probleme mit "ref"(wahrscheinlich in Schleifen) haben, ist die Lösung zu verwenden 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 })}
    />
  );
});
GilCarvalhoDev
quelle
Können Sie mehr erklären, warum "Verwenden Sie keine Pfeilfunktion, um Funktionskomponenten zu erstellen." ? - Danke
Juan
Um Probleme mit useState () in bestimmten Situationen zu vermeiden, z. B. in diesem Fall: Codesandbox.io/s/usestate-error-f452s
GilCarvalhoDev