React Hook "useState" viene chiamato nella funzione "app" che non è né un componente della funzione React né una funzione React Hook personalizzata

Sto cercando di utilizzare hook di reazione per un semplice problema

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

con le seguenti dipendenze.

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

ma sto ancora ricevendo il seguente errore:

./src/App.js

Riga 7:
React Hook "useState" viene chiamato nella funzione "app" che non è né un componente della funzione React né una funzione React Hook personalizzata

Riga 39:
'stato' non è definito
no-undef

Cerca le parole chiave per saperne di più su ogni errore.

Il codice componente è di seguito:

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;

Componente persona

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; 

Prova a capitalizzare 'app' come

const App = props => {...}

export default App;

In React, i componenti devono essere capitalizzati e gli hook personalizzati devono iniziare use.

Sento che stiamo facendo lo stesso corso a Udemy.

Se è così, basta capitalizzare il

const app

Per

const App

Fare così come per il

export default app

Per

export default App

Funziona bene per me.

Per quanto ne so, in questo pacchetto è inclusa una linter. E richiede che componend dovrebbe iniziare dal carattere Capitale. Per favore controllalo.

Comunque per me è triste.

Utilizzare la lettera maiuscola nel nome della funzione.

function App(){}

Usa const const invece di const app

Prova a scrivere in maiuscolo il nome della tua app

const App = props => {...}

export default App;

Viene visualizzato questo errore: "React Hook" useState "viene chiamato nella funzione" App "che non è né un componente della funzione React né una funzione React Hook personalizzata"

Soluzione: Fondamentalmente è necessario capitalizzare la funzione.

Per esempio:

const Helper =()=>{}

function Helper2(){}

il primo carattere della tua funzione dovrebbe essere maiuscolo

Ho avuto lo stesso problema. si scopre che il problema era l'uso della maiuscola nella "A". Inoltre, se esporti: export default App;assicurati di esportare anche lo stesso nome "App".

I componenti dovrebbero iniziare con lettere maiuscole. Ricorda anche di cambiare la prima lettera della riga da esportare!

Hai l'importazione giusta?

import React, { useState } from 'react';

I nomi dei componenti di React devono essere scritti in maiuscolo e le funzioni di hook personalizzati devono iniziare con la parola chiave use per identificarsi come funzione di hook di reazione.

Quindi, capitalizzare i componenti dell'app in App

Ho avuto lo stesso problema, ma non con l'app. Avevo una classe personalizzata ma ho usato una lettera minuscola per iniziare il nome della funzione e ho anche ricevuto l'errore.

Modificata la prima lettera del nome della funzione e la riga di esportazione in CamelCase e l'errore è scomparso.

nel mio caso il risultato finale è stato qualcosa del tipo:

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

questo ha risolto il mio problema.

La soluzione è semplice, corretta "app" e scrivere "App" con il primo carattere in maiuscolo.

Capitalizzare l'app su App funzionerà sicuramente.

In JSX, il nome del tag minuscolo è considerato come componente nativo html. Per reagire riconoscere la funzione come componente React, è necessario scrivere in maiuscolo il nome.

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

Sostituisci questo

export default app;

con questo

export default App;

Rendi il nome della funzione maiuscolo. Questo funziona per me.

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"

Per il seguente errore, scrivere in maiuscolo la prima lettera del componente e anche l'esportazione.

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

La soluzione, come già indicato da Yuki, è capitalizzare il nome del componente. È importante notare che non solo il componente dell'app "predefinito" deve essere in maiuscolo, ma tutti i componenti:

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

export default Person;

Ciò è dovuto al pacchetto eslint-plugin-reply-hooks, in particolare la funzione isComponentName () all'interno dello script RulesOfHooks.js.

Spiegazione ufficiale dalle FAQ di Hooks :

Forniamo un plug-in ESLint che applica le regole di Hooks per evitare bug. Presuppone che qualsiasi funzione che inizia con "use" e una lettera maiuscola subito dopo sia un hook. Riconosciamo che questa euristica non è perfetta e potrebbero esserci alcuni falsi positivi, ma senza una convenzione a livello di ecosistema non c'è modo di far funzionare bene Hooks - e nomi più lunghi scoraggeranno le persone dall'adottare Hooks o dal seguire la convenzione.

Prima di tutto, devi mettere in maiuscolo la FirstLetter dei tuoi componenti, nel tuo caso l' app dovrebbe essere App e persona dovrebbe essere Persona .

Ho provato a copiare il tuo codice nella speranza di trovare il problema. Dal momento che non hai condiviso il modo in cui chiami il componente App , posso vedere solo 1 modo per risolvere questo problema.

Questo è il collegamento in CodeSandbox: chiamata hook non valida .

Perché? A causa del codice di seguito che è sbagliato:

ReactDOM.render(App(), rootElement);

Sarebbe dovuto essere:

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

Per maggiori informazioni, dovresti leggere Rule of Hooks - React

Spero che questo ti aiuti!

Utilizzare la lettera maiuscola per definire il nome del componente funzionale / React aggancia i componenti personalizzati. "const 'app' dovrebbe essere const 'App'.

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]

Passaggio 1: modificare il nome del file src / App.js in src / app.js

Passaggio 2: fare clic su "Sì" per "Aggiorna importazioni per app.js".

Passaggio 3: riavviare nuovamente il server.

Ogni volta che si lavora con un componente funzionale React, mantenere sempre la prima lettera del nome del componente in maiuscolo per evitare questi errori di React Hooks.

Nel tuo caso, hai nominato il componente app, che dovrebbe essere modificato in App, come ho detto sopra, per evitare l'errore React Hook.

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

Nella funzione app hai digitato erroneamente la parola setpersonSate, mancando la lettera t, quindi dovrebbe essere setpersonState.

Errore :

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

Soluzione :

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

Ciò è dovuto alla regola ESLint per React Hooks. Trova il link della regola qui:

Regola ESLint per React Hooks

A partire da ora, la regola è descritta nella riga n. 44.

Non utilizzare la funzione freccia per creare componenti funzionali.

Fai come uno degli esempi seguenti:

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

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

O

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

Se hai problemi con "ref"(probabilmente nei loop), la soluzione è usare 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 })}
    />
  );
});