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

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; 

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.

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.

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.

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

funciton App(){}     

Verwenden Sie die const App anstelle der const app

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

const App = props => {...}

export default App;

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(){}

Das erste Zeichen Ihrer Funktion sollte ein Großbuchstabe sein

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.

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

Haben Sie den richtigen Import?

import React, { useState } from 'react';

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

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.

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

Kapitalisieren Sie die App zu App wird sicherlich funktionieren.

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

Ersetzen Sie dies

export default app;

mit diesem

export default App;

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

export default function App() { }

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;

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.

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!

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]

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.

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.

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

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({....

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.

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