React Hook «useState» est appelé dans la fonction «app» qui n'est ni un composant de fonction React ni une fonction React Hook personnalisée

148

J'essaie d'utiliser des hooks de réaction pour un problème simple

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

avec les dépendances suivantes.

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

mais j'obtiens toujours l'erreur suivante:

./src/App.js

Ligne 7:
React Hook "useState" est appelé dans la fonction "app" qui n'est ni un composant de fonction React ni une fonction React Hook personnalisée react-hooks / rules-of-hooks

Ligne 39:
'état' n'est pas défini
no-undef

Recherchez les mots clés pour en savoir plus sur chaque erreur.

Le code du composant est ci-dessous:

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;

Composant personne

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
la source
1
Pouvez-vous partager votre code de composant?
Sachin
import React, {useState} de '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', âge: '4'}],}); return (<div className = "App"> <h2> Ceci est react </h2> <Person name = {personState.person [1] .name} age = "27"> </Person> <Person name = {personState .person [2] .name} age = "4"> </Person> </div>); }, exporter l'application par défaut;
Bishnu
Composant Personne: - importez React depuis 'react'; const person = (props) => {return (<div> <h3> je suis {props.name} </h3> <p> j'ai {props.age} ans </p> <p> {props. children} </p> </div>)} exporter la personne par défaut;
Bishnu
5
c'est un enfer de lire un tel code partagé, respecter les autres
AlexNikonov
5
J'ai eu le même problème aussi du cours Maximilian React.
GDG612

Réponses:

339

Essayez de mettre en majuscule "application" comme

const App = props => {...}

export default App;

Dans React, les composants doivent être capitalisés et les hooks personnalisés doivent commencer par use.

YUKI
la source
26
C'est un bug difficile à trouver dans une application, je pense qu'un autre commentaire devrait être ajouté au message d'erreur pour souligner cette possibilité.
Mark E
22
La raison de cet être que , dans les règles de crochets plug - in ESLint , il y a un contrôle pour voir si un nom de composant ou fonction est valide: Checks if the node is a React component name. React component names must always start with a non-lowercase letter..
HGomez
11
la mise en majuscule de A dans l'application fonctionne pour moi ... mais je ne me demande pas pourquoi max n'a pas obtenu cette erreur dans le cours udemy?
Ashish Sharma
8
Même question "pourquoi max n'a pas obtenu d'erreur? J'ai changé" app "en" App "et maintenant cela a fonctionné pour moi!
Forhad
vous êtes envoyé par Dieu. Je pourrais avoir une dure journée en ce moment. Soyez béni
kipruto le
51

J'ai l'impression que nous suivons le même cours à Udemy.

Si tel est le cas, mettez simplement en majuscule

const app

À

const App

Faites aussi bien que pour le

export default app

À

export default App

Cela fonctionne bien pour moi.

Tuan Phan
la source
5
Oui, je pense que 3 d'entre nous font le même cours. Pourquoi est-il sensible à la casse?
MeltingDog
2
Cela doit être marqué comme une bonne réponse. Par défaut, le nom du "composant principal" DOIT être en majuscule. Pensez également à importer vos composants avec des noms en majuscules. INCORRECT: importation de compo depuis './Compo'; DROITE: importer Compo depuis './Compo'; As react reconnaît les balises JSX en majuscules comme composants de réaction.
Marcos R
1
pourquoi est-il sensible au cas?
kipruto le
36

Pour autant que je sache, un linter est inclus dans ce package. Et cela nécessite que votre composant commence à partir du caractère Capital. S'il te plaît vérifie le.

Cependant, moi, c'est triste.

alerya
la source
Merci a travaillé comme un charme @alerya
karthickeyan
Merci d'avoir économisé mon temps.
Harsimer le
22

Utilisez la première lettre majuscule dans le nom de la fonction.

function App(){}
Kelum Sampath Edirisinghe
la source
"Tout d'abord, vous devez mettre en majuscules la première lettre de vos composants, dans votre cas, l'application doit être une application et la personne doit être une personne." Quelqu'un l'a déjà écrit ...
Pochmurnik
Cela a été répondu et cela devrait être marqué comme la réponse. Solution simple bien expliquée.
user2112618 le
18

Utilisez l'application const au lieu de l'application const

Nair de Jyothish
la source
14

Essayez simplement de mettre en majuscule le nom de votre application

const App = props => {...}

export default App;
pratik garg
la source
voulez-vous dire le titre du document?
gakeko betsi le
Its Working, Thanks
Dev Rupinder
12

Vous obtenez cette erreur: "React Hook" useState "est appelé dans la fonction" App "qui n'est ni un composant de fonction React ni une fonction React Hook personnalisée"

Solution: vous devez essentiellement capitaliser la fonction.

Par exemple:

const Helper =()=>{}

function Helper2(){}

ASHISH RANJAN
la source
11

le premier caractère de votre fonction doit être une majuscule

rubimbura brian
la source
Wow, j'oublie toujours ça. Merci :)
Dzenis H.
10

J'ai eu le même problème. s'avère que la mise en majuscule du «A» dans «App» était le problème. De plus, si vous exportez: export default App;assurez-vous d'exporter également le même nom «App».

Samceena
la source
10

Les composants doivent commencer par des majuscules. Pensez également à changer la première lettre de la ligne pour exporter!

César O. Araújo
la source
2
Votre question ne semble pas être une réponse. Après avoir atteint 50 représentants, vous pourrez commenter les questions. Si votre réponse est une réponse, essayez de l'améliorer. Pourquoi les composants devraient-ils commencer par des majuscules, par exemple? Aussi, d'autres réponses ont déjà dit que, donnez-vous quelque chose de nouveau?
Ender Look
5

Avez-vous la bonne importation?

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

Les noms des composants React doivent être en majuscules et les fonctions de hooks personnalisées doivent commencer par l' utilisation mot clé pour s'identifier en tant que fonction de hook de réaction.

Alors, capitalisez les composants de votre application dans l' application

Ali Torki
la source
3

J'ai eu le même problème, mais pas avec l'application. J'avais une classe personnalisée mais j'ai utilisé une lettre minuscule pour démarrer le nom de la fonction et j'ai également reçu l'erreur.

Changement de la première lettre du nom de la fonction et de la ligne d'exportation en CamelCase et erreur disparue.

dans mon cas, le résultat final était quelque chose comme:

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

cela a résolu mon problème.

Terence Hinrichsen
la source
2

La solution est simple, corriger "app" et écrire "App" avec le premier caractère en majuscule.

KleberDigital
la source
Bienvenue dans StackOverflow (vote positif). veuillez mettre un code et répondre aux questions.
Mehdi Yeganeh
2

Capitaliser l'application sur l'application fonctionnera sûrement.

Harshit Singhai
la source
2

Dans JSX, le nom de balise en minuscules est considéré comme un composant natif html. Pour réagir, reconnaître la fonction en tant que composant React, vous devez mettre en majuscule le nom.

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
la source
2

Remplacez ceci

export default app;

avec ça

export default App;
Charix
la source
2

Mettez le nom de la fonction en majuscule. Cela fonctionne pour moi.

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

Pour l'erreur suivante, mettez en majuscule la première lettre du composant comme, ainsi que l'exportation également.

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

La solution, comme Yuki l'a déjà souligné, consiste à mettre en majuscule le nom du composant. Il est important de noter que non seulement le composant App "par défaut" doit être mis en majuscule, mais tous les composants:

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

export default Person;

Cela est dû au package eslint-plugin-react-hooks, en particulier à la fonction isComponentName () dans le script RulesOfHooks.js.

Explication officielle de la FAQ Hooks :

Nous fournissons un plugin ESLint qui applique les règles des Hooks pour éviter les bogues. Il suppose que toute fonction commençant par «utiliser» et une lettre majuscule juste après elle est un Hook. Nous reconnaissons que cette heuristique n'est pas parfaite et qu'il peut y avoir des faux positifs, mais sans une convention à l'échelle de l'écosystème, il n'y a tout simplement aucun moyen de faire fonctionner correctement les Hooks - et des noms plus longs décourageront les gens d'adopter les Hooks ou de suivre la convention.

Nicolas Hevia
la source
1

Tout d'abord, vous devez mettre en majuscule la première lettre de vos composants, dans votre cas, l' application doit être une application et la personne doit être une personne .

J'ai essayé de copier votre code dans l'espoir de trouver le problème. Puisque vous n'avez pas partagé comment vous appelez l' application composant , je ne peux voir qu'une seule façon de résoudre ce problème.

C'est le lien dans CodeSandbox: Appel de crochet non valide .

Pourquoi? En raison du code ci-dessous qui est faux:

ReactDOM.render(App(), rootElement);

Cela aurait dû être:

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

Pour plus d'informations, vous devriez lire Rule of Hooks - React

J'espère que cela t'aides!

Jojo Tutor
la source
1

Utilisez la lettre majuscule pour définir le nom du composant fonctionnel / les composants personnalisés React hooks. "const 'app' doit être 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]

Nupur Agarwal
la source
0

Étape 1: Changez le nom de fichier src / App.js en src / app.js

Étape 2: Cliquez sur "Oui" pour "Mettre à jour les importations pour app.js".

Étape 3: Redémarrez le serveur à nouveau.

Mohd. Shahnawaz Ali Choudhary
la source
0

Lorsque vous travaillez avec un composant fonctionnel React, conservez toujours la première lettre du nom du composant en majuscules afin d'éviter ces erreurs React Hooks.

Dans votre cas, vous avez nommé le composant app, qui devrait être remplacé App, comme je l'ai dit ci-dessus, pour éviter l'erreur React Hook.

Aniruddh Mukherjee
la source
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
la source
0

Dans la fonction de l'application, vous avez mal orthographié le mot setpersonSate, manquant la lettre t, il devrait donc êtresetpersonState .

Erreur :

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

Solution :

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

Cela est dû à la règle ESLint pour React Hooks. Retrouvez le lien de la règle ici:

Règle ESLint pour les Hooks React

À partir de maintenant, la règle est décrite dans la ligne no. 44.

Kamesh Kumar Singh
la source
-3

N'utilisez pas la fonction de flèche pour créer des composants fonctionnels.

Faites comme l'un des exemples ci-dessous:

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

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

Ou

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

Si vous rencontrez des problèmes avec "ref"(probablement dans les boucles), la solution est d'utiliser 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
la source
Pouvez-vous expliquer plus, pourquoi "N'utilisez pas la fonction de flèche pour créer des composants fonctionnels." ? - Merci
Juan le
Pour éviter des problèmes avec useState () dans certaines situations, comme dans ce cas: codesandbox.io/s/usestate-error-f452s
GilCarvalhoDev