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

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; 

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.

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.

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.

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

function App(){}

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

Essayez simplement de mettre en majuscule le nom de votre application

const App = props => {...}

export default App;

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

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

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».

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

Avez-vous la bonne importation?

import React, { useState } from 'react';

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

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.

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

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

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

Remplacez ceci

export default app;

avec ça

export default App;

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

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"

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;

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.

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!

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]

É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.

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.

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

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

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.

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