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

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; 

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.

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

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.

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

function App(){}

Use la aplicación const en lugar de la aplicación const

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

const App = props => {...}

export default App;

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

El primer carácter de su función debe ser mayúscula

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

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

¿Tienes la importación correcta?

import React, { useState } from 'react';

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

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.

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

Capitalizar la aplicación a la aplicación seguramente funcionará.

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

Reemplace esto

export default app;

con este

export default App;

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

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"

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;

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.

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!

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]

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.

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.

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

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

Esto se debe a la regla ESLint para React Hooks. Encuentre el enlace de la regla aquí:

Regla de ESLint para React Hooks

A partir de ahora, la regla se describe en la línea no. 44)

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