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 istZeile 39:
'state' ist nicht
no-undef definiertSuchen 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;
reactjs
react-hooks
Bishnu
quelle
quelle
Antworten:
Versuchen Sie, "App" wie groß zu schreiben
In React müssen Komponenten groß geschrieben werden und benutzerdefinierte Hooks müssen damit beginnen
use
.quelle
Checks if the node is a React component name. React component names must always start with a non-lowercase letter.
.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
Zu
Es funktioniert gut für mich.
quelle
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.
quelle
Verwenden Sie im Funktionsnamen den Großbuchstaben. z.B:-
quelle
Verwenden Sie die const App anstelle der const app
quelle
Versuchen Sie einfach, Ihren App-Namen groß zu schreiben
quelle
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:
quelle
Das erste Zeichen Ihrer Funktion sollte ein Großbuchstabe sein
quelle
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.quelle
Komponenten sollten mit Großbuchstaben beginnen. Denken Sie auch daran, den ersten Buchstaben in der zu exportierenden Zeile zu ändern!
quelle
Haben Sie den richtigen Import?
quelle
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
quelle
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:
Das hat mein Problem gelöst.
quelle
Die Lösung ist einfach, korrekt "App" und schreiben Sie "App" mit dem ersten Zeichen in Großbuchstaben.
quelle
Kapitalisieren Sie die App zu App wird sicherlich funktionieren.
quelle
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.
https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
quelle
Ersetzen Sie dies
mit diesem
quelle
Machen Sie den Funktionsnamen groß. Das funktioniert bei mir.
quelle
Großschreiben Sie für den folgenden Fehler den ersten Buchstaben der Komponente wie und auch den Export.
quelle
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:
Dies liegt am Paket eslint-plugin-react-hooks, insbesondere an der Funktion isComponentName () im Skript RulesOfHooks.js.
Offizielle Erklärung aus den Hooks-FAQs :
quelle
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:
Es hätte sein sollen:
Weitere Informationen finden Sie unter Regel der Haken - Reagieren
Hoffe das hilft!
quelle
Verwenden Sie Großbuchstaben zum Definieren des Namens der Funktionskomponente / React Hooks für benutzerdefinierte Komponenten. "const 'app' sollte const 'App' sein.
App.js.
Person.js
[ReactHooks] [useState] [ReactJs]
quelle
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.
quelle
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 sollteApp
, um den React Hook-Fehler zu vermeiden.quelle
quelle
In der App-Funktion haben Sie das Wort falsch geschrieben
setpersonSate
und den Buchstaben verpasstt
, daher sollte es so seinsetpersonState
.Fehler :
Lösung :
quelle
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.
quelle
Verwenden Sie keine Pfeilfunktion, um Funktionskomponenten zu erstellen.
Führen Sie eines der folgenden Beispiele aus:
Oder
Wenn Sie Probleme mit
"ref"
(wahrscheinlich in Schleifen) haben, ist die Lösung zu verwendenforwardRef()
:quelle