React Hook "useState" se llama en la función "app" que no es un componente de la función React ni una función personalizada React Hook


148

Estoy tratando de usar ganchos de reacción para un problema simple

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

con las siguientes dependencias.

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

pero sigo recibiendo el siguiente error:

./src/App.js

Línea 7:
React Hook "useState" se llama en la función "aplicación" que no es un componente de la función React ni una función personalizada React Hook react-hooks / rules-of-hooks

Línea 39:
'estado' no está definido
no-undef

Busque las palabras clave para obtener más información sobre cada error.

El código del componente está abajo:

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 de 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; 

1
¿Puedes compartir tu código de componente?
Sachin

import React, {useState} de 'react'; importar './App.css'; importar Persona desde './Person/Person'; const app = props => {const [personState, setPersonSate] = useState ({person: [{name: 'bishnu', age: '32 '}, {name:' rasmi ', age: '27'}, {name : 'fretbox', edad: '4'}],}); return (<div className = "App"> <h2> Esto es reaccionar </h2> <Person name = {personState.person [1] .name} age = "27"> </Person> <Person name = {personState .person [2] .name} age = "4"> </Person> </div>); }; exportar aplicación predeterminada;
Bishnu

Componente de persona: - Importar reaccionar desde 'reaccionar'; const person = (props) => {return (<div> <h3> i {{props.name} </h3> <p> i {props.age} años </p> <p> {props. hijos} </p> </div>)} exportar persona predeterminada;
Bishnu

55
es un infierno leer ese código compartido, respetar a los demás
AlexNikonov

55
También tuve el mismo problema del curso Maximilian React.
GDG612

Respuestas:


338

Intenta capitalizar 'app' como

const App = props => {...}

export default App;

En React, los componentes deben ser capitalizados, y los ganchos personalizados deben comenzar con use.


26
Este es un error difícil de encontrar en una aplicación, creo que se debe agregar otro comentario al mensaje de error para señalar esta posibilidad.
Mark E

22
La razón de esto es que en las Reglas de ganchos ESLint plug-in , hay una comprobación para ver si un nombre de componente o función es válida: Checks if the node is a React component name. React component names must always start with a non-lowercase letter..
HGomez

11
capitalizar A en la aplicación funciona para mí ... pero no estoy pensando por qué max no recibió este error en el curso udemy.
Ashish Sharma

8
La misma pregunta "¿por qué Max no recibió ningún error? ¡Cambié" aplicación "por" aplicación "y ahora funcionó para mí!
Forhad

eres Dios enviado Podría estar teniendo un día difícil en este momento. Sea bendecido
kipruto

51

Siento que estamos haciendo el mismo curso en Udemy.

Si es así, simplemente capitalice el

const app

A

const App

Haz tan bien como para el

export default app

A

export default App

Funciona bien para mi


55
Sí, creo que eso hace que 3 de nosotros sigamos el mismo curso. ¿Por qué es sensible a mayúsculas y minúsculas?
MeltingDog

2
Esto debe marcarse como respuesta correcta. Por defecto, el nombre del "componente principal" DEBE estar en mayúscula. También recuerde importar sus componentes con nombres en mayúscula. INCORRECTO: importar componente de './Compo'; DERECHA: importar Compo desde './Compo'; Como reacciona, reconoce las etiquetas JSX en mayúscula como componentes de reacción.
Marcos R

1
¿Por qué es sensible al caso?
kipruto

36

Hasta donde yo sé, se incluye un linter en este paquete. Y requiere que tu componente comience con el carácter Capital. Compruébelo por favor.

Sin embargo, para mí es triste.


Gracias trabajó como un encanto @alerya
karthickeyan

Gracias por ahorrarme tiempo.
Harsimer

22

Use la primera letra mayúscula en el nombre de la función.

function App(){}

"En primer lugar, debe poner en mayúscula la FirstLetter de sus componentes, en su caso, la aplicación debería ser App y la persona debería ser Person". Alguien ya lo escribió ...
Pochmurnik

Esto ha sido respondido y debe marcarse como la respuesta. Solución simple explicada a la derecha.
user2112618


14

Solo intenta poner en mayúscula el nombre de tu aplicación

const App = props => {...}

export default App;

¿te refieres al título del documento?
Gakeko Betsi

Está funcionando, gracias
Dev Rupinder

12

Recibirá este error: "React Hook" useState "se llama en la función" Aplicación ", que no es un componente de la función React ni una función personalizada React Hook"

Solución: básicamente necesita capitalizar la función.

Por ejemplo:

const Helper =()=>{}

function Helper2(){}



10

Tuve el mismo problema. Resulta que capitalizar la "A" en "Aplicación" fue el problema. Además, si exporta: export default App;asegúrese de exportar también el mismo nombre "Aplicación".


10

Los componentes deben comenzar con letras mayúsculas. ¡Recuerde también cambiar la primera letra de la línea para exportar!


2
Tu pregunta no parece una respuesta. Después de alcanzar 50 repeticiones podrás comentar las preguntas. Si su respuesta es una respuesta, intente mejorarla. ¿Por qué los componentes deberían comenzar con letras mayúsculas, por ejemplo? Además, otras respuestas ya han dicho eso, ¿estás dando algo nuevo?
Ender Look


5

Los nombres de los componentes de reacción deben escribirse en mayúsculas y las funciones de enlace personalizadas deben comenzar con la palabra clave use para identificar como una función de enlace de reacción.

Entonces, capitalice los componentes de su aplicación en App


3

Tuve el mismo problema, pero no con la aplicación. Tenía una clase personalizada pero usé una letra minúscula para iniciar el nombre de la función y también recibí el error.

Cambió la primera letra del nombre de la función y la línea de exportación a CamelCase y desapareció el error.

en mi caso el resultado final fue algo como:

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

Esto resolvió mi problema.


2

La solución es simple, corrige "aplicación" y escribe "Aplicación" con el primer carácter en mayúscula.


Bienvenido a StackOverflow (Upvoted). por favor ponga un código y responda a las preguntas.
Mehdi Yeganeh


2

En JSX, el nombre de la etiqueta en minúsculas se considera como componente nativo html. Para reaccionar, reconozca la función como componente React, necesita poner en mayúscula el nombre.

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

Reemplace esto

export default app;

con este

export default App;

2

Hacer que el nombre de la función sea capital. Esto funciona para mi.

export default function App() { }

2
React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

Para el siguiente error, capitalice la primera letra del componente como, y también la exportación también.

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

1

La solución, como ya señaló Yuki, es capitalizar el nombre del componente. Es importante tener en cuenta que no solo se debe poner en mayúscula el componente de la aplicación "predeterminada", sino todos los componentes:

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

export default Person;

Esto se debe al paquete eslint-plugin-react-hooks, específicamente a la función isComponentName () dentro del script RulesOfHooks.js.

Explicación oficial de las preguntas frecuentes de Hooks :

Proporcionamos un complemento ESLint que aplica las reglas de Hooks para evitar errores. Se supone que cualquier función que comience con "uso" y una letra mayúscula justo después de ser un gancho. Reconocemos que esta heurística no es perfecta y puede haber algunos falsos positivos, pero sin una convención en todo el ecosistema simplemente no hay forma de hacer que Hooks funcione bien, y los nombres más largos desanimarán a las personas a adoptar Hooks o seguir la convención.


1

En primer lugar, debe poner en mayúscula la FirstLetter de sus componentes, en su caso, la aplicación debería ser App y person debería ser Person .

Traté de copiar su código con la esperanza de encontrar el problema. Como no compartió cómo llama al componente de la aplicación , solo puedo ver 1 forma de resolver esto como un problema.

Este es el enlace en CodeSandbox: llamada de enlace no válida .

¿Por qué? Debido al siguiente código que está mal:

ReactDOM.render(App(), rootElement);

Debería haber sido:

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

Para obtener más información, debe leer Rule of Hooks - React

¡Espero que esto ayude!


1

Use mayúscula para definir el nombre del componente funcional / React hooks componentes personalizados. "const 'app' debería ser 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]


0

Paso 1: cambie el nombre del archivo src / App.js a src / app.js

Paso 2: haga clic en "Sí" para "Actualizar importaciones para app.js".

Paso 3: reinicie el servidor nuevamente.


0

Siempre que trabaje con un componente funcional React, mantenga siempre la primera letra del nombre del componente en mayúsculas para evitar estos errores de React Hooks.

En su caso, ha nombrado el componente app, que debe cambiarse a App, como dije anteriormente, para evitar el error React Hook.


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

0

En la función de aplicación, ha deletreado incorrectamente la palabra setpersonSate, falta la letra t, por lo que debería ser setpersonState.

Error :

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

Solución :

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


-3

No use la función de flecha para crear componentes funcionales.

Haz uno de los siguientes ejemplos:

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

Si tiene problemas con "ref"(probablemente en bucles), la solución es usar 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 })}
    />
  );
});

¿Puede explicar más por qué "No utilice la función de flecha para crear componentes funcionales". ? - Gracias
Juan

Para evitar problemas con useState () en algunas situaciones, como en este caso: codesandbox.io/s/usestate-error-f452s
GilCarvalhoDev
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.