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-hooksLigne 39:
'état' n'est pas défini
no-undefRecherchez 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;
reactjs
react-hooks
Bishnu
la source
la source
Réponses:
Essayez de mettre en majuscule "application" comme
Dans React, les composants doivent être capitalisés et les hooks personnalisés doivent commencer par
use
.la source
Checks if the node is a React component name. React component names must always start with a non-lowercase letter.
.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
À
Cela fonctionne bien pour moi.
la source
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.
la source
Utilisez la première lettre majuscule dans le nom de la fonction.
la source
Utilisez l'application const au lieu de l'application const
la source
Essayez simplement de mettre en majuscule le nom de votre application
la source
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:
la source
le premier caractère de votre fonction doit être une majuscule
la source
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».la source
Les composants doivent commencer par des majuscules. Pensez également à changer la première lettre de la ligne pour exporter!
la source
Avez-vous la bonne importation?
la source
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
la source
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:
cela a résolu mon problème.
la source
La solution est simple, corriger "app" et écrire "App" avec le premier caractère en majuscule.
la source
Capitaliser l'application sur l'application fonctionnera sûrement.
la source
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.
https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
la source
Remplacez ceci
avec ça
la source
Mettez le nom de la fonction en majuscule. Cela fonctionne pour moi.
la source
Pour l'erreur suivante, mettez en majuscule la première lettre du composant comme, ainsi que l'exportation également.
la source
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:
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 :
la source
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:
Cela aurait dû être:
Pour plus d'informations, vous devriez lire Rule of Hooks - React
J'espère que cela t'aides!
la source
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
Person.js
[ReactHooks] [useState] [ReactJs]
la source
É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.
la source
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.la source
la source
Dans la fonction de l'application, vous avez mal orthographié le mot
setpersonSate
, manquant la lettret
, il devrait donc êtresetpersonState
.Erreur :
Solution :
la source
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.
la source
N'utilisez pas la fonction de flèche pour créer des composants fonctionnels.
Faites comme l'un des exemples ci-dessous:
Ou
Si vous rencontrez des problèmes avec
"ref"
(probablement dans les boucles), la solution est d'utiliserforwardRef()
:la source