web-dev-qa-db-fra.com

React Hook "useState" est appelé dans la fonction "app" qui n'est ni un composant de fonction React ou un React) Fonction crochet

J'essaie d'utiliser des crochets React 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 je reçois 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 ou un élément React Hook function react- crochets/règles de crochets

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;
reactjsreact-hooks
99
Bishnu

Essayez de mettre en majuscule "app" comme

const App = props => {...}

export default App;
236
YUKI

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

Si oui, capitalisez simplement

const app

À

const App

Faites aussi bien que pour

export default app

À

export default App

Cela fonctionne bien pour moi.

33
Tuan Phan

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

Mais pour moi c'est triste.

24
alerya

utilisez la première lettre majuscule dans le nom de la fonction. par exemple: - fonction App {}

17
Kelum Sampath Edirisinghe

Essayez simplement de mettre en majuscule le nom de votre application

const App = props => {...}

export default App;
12
pratik garg

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

Solution: vous devez essentiellement capitaliser la fonction.

Par exemple:

const Helper =()=>{}

function Helper2(){}
11
ASHISH RANJAN

J'ai eu le même problème. s'avère que Capitaliser le "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".

10
samson ade

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

10
César O. Araújo

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

8
rubimbura brian

Les noms des composants React doivent être en majuscules et les fonctions de hook personnalisées doivent commencer par le mot clé tiliser pour s'identifier comme une fonction de hook React.

Donc, capitalisez vos composants app en App

5
Ali Torki

Utiliser l'application const au lieu de l'application const

4
Jyothish s nair

Avez-vous la bonne importation?

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

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.

Modification de la première lettre du nom de la fonction et de la ligne d'exportation vers 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.

3
Terence Hinrichsen

Dans JSX, le nom de balise en minuscule est considéré comme un composant natif html. Afin de réagir, reconnaissez la fonction comme composant React, vous devez mettre le nom en majuscule).

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

2
Ho Albert

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

2
KleberDigital

Capitaliser l'application sur App fonctionnera sûrement.

2
Harshit Singhai

Tout d'abord, vous devez mettre en majuscule la FirstLetter de vos composants, dans votre cas app devrait être App et personne devrait être Personne .

J'ai essayé de copier votre code dans l'espoir de trouver le problème. Étant donné que vous n'avez pas partagé la façon dont vous appelez le composant App , je ne vois qu'une façon de résoudre ce problème.

Il s'agit du lien dans CodeSandbox: appel non valide .

Pourquoi? À cause 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!

1
Jojo Tutor

La solution, comme l'a déjà souligné Yuki, consiste à mettre en majuscule le nom du composant. Il est important de noter que non seulement le composant App "par défaut" doit être capitalisé, 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 de Hooks :

Nous fournissons un plugin ESLint qui applique les règles de Hooks pour éviter les bugs. Il suppose que toute fonction commençant par "use" et une majuscule juste après c'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 Hooks correctement - et des noms plus longs décourageront les gens d'adopter des Hooks ou de suivre la convention.

1
Nicolas Hevia

Étape 1: remplacez le nom de fichier src/App.js par src/app.js

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

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

0
Mohd. Shahnawaz Ali Choudhary

N'utilisez pas la fonction 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 avez des problèmes avec "ref" (Probablement en 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 })}
    />
  );
});
0
GilCarvalhoDev