O React Hook “useState” é chamado na função “app”, que não é um componente da função React ou uma função personalizada do React Hook

Estou tentando usar ganchos de reação para um problema simples

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

com as seguintes dependências.

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

mas ainda estou recebendo o seguinte erro:

./src/App.js

Linha 7:
Gancho de reação "useState" é chamado na função "app", que não é um componente da função React ou uma função personalizada do React Hook, ganchos de reação / regras de ganchos

Linha 39:
'state' não está definido
no undef

Pesquise as palavras-chave para saber mais sobre cada erro.

O código do componente está abaixo:

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 pessoa

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; 

Tente capitalizar 'app' como

const App = props => {...}

export default App;

No React, os componentes precisam ser capitalizados e os ganchos personalizados precisam começar use.

Sinto que estamos fazendo o mesmo curso na Udemy.

Nesse caso, apenas capitalize o

const app

Para

const App

Faça tão bem quanto para

export default app

Para

export default App

Funciona bem para mim.

Tanto quanto sei, um linter está incluído neste pacote. E isso requer que você componend comece com caracteres maiúsculos. Por favor verifique isto.

No entanto, quanto a mim, é triste.

Use maiúsculas na primeira letra no nome da função.

function App(){}

Use const app em vez de const app

Apenas tente capitalizar o nome do seu aplicativo

const App = props => {...}

export default App;

Você está recebendo este erro: "React Hook" useState "é chamado na função" App ", que não é um componente da função React ou uma função personalizada do React Hook"

Solução: Basicamente, você precisa capitalizar a função.

Por exemplo:

const Helper =()=>{}

function Helper2(){}

o primeiro caractere da sua função deve estar em maiúsculas

Eu tive o mesmo problema. Acontece que Capitalizar o "A" em "App" foi o problema. Além disso, se você exportar: export default App;certifique-se de exportar o mesmo nome "App" também.

Os componentes devem começar com letras maiúsculas. Lembre-se também de alterar a primeira letra da linha para exportar!

Você tem a importação certa?

import React, { useState } from 'react';

Os nomes dos componentes de reação devem ser capitalizados e as funções de ganchos personalizados devem começar com a palavra-chave use para identificar como uma função de gancho de reação.

Capitalize os componentes do seu aplicativo para App

Eu tive o mesmo problema, mas não com o aplicativo. Eu tinha uma classe personalizada, mas usei uma letra minúscula para iniciar o nome da função e também recebi o erro.

A primeira letra do nome da função e a linha de exportação foram alteradas para o CamelCase e o erro desapareceu.

no meu caso, o resultado final foi algo como:

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

isso resolveu meu problema.

A solução é simples, correta "app" e escreva "App" com o primeiro caractere em maiúsculas.

Capitalizar o aplicativo para o App certamente funcionará.

No JSX, o nome da marca em minúsculas é considerado como componente nativo html. Para reagir, reconheça a função como componente React, precisa colocar o nome em maiúscula.

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

Substitua este

export default app;

com isso

export default App;

Torne o nome da função maiúsculo. Isso funciona para mim.

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 o erro a seguir, coloque em maiúscula a primeira letra do componente como e também a exportação também.

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

A solução, como Yuki já apontou, é capitalizar o nome do componente. É importante observar que não apenas o componente "padrão" do aplicativo precisa ser capitalizado, mas todos os componentes:

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

export default Person;

Isso ocorre devido ao pacote eslint-plugin-react-hooks, especificamente à função isComponentName () dentro do script RulesOfHooks.js.

Explicação oficial das Perguntas frequentes dos Hooks :

Nós fornecemos um plug-in ESLint que aplica regras de Hooks para evitar bugs. Ele pressupõe que qualquer função que comece com "use" e uma letra maiúscula logo após ser um Hook. Reconhecemos que essa heurística não é perfeita e pode haver alguns falsos positivos, mas sem uma convenção em todo o ecossistema, não há como fazer o Hooks funcionar bem - e nomes mais longos desencorajarão as pessoas a adotarem o Hooks ou seguirem a convenção.

Primeiro de tudo, você precisa colocar em maiúscula o FirstLetter de seus componentes; no seu caso, o aplicativo deve ser App e a pessoa deve ser Person .

Tentei copiar seu código na esperança de encontrar o problema. Como você não compartilhou como chama o componente de aplicativo , só vejo uma maneira de resultar em um problema.

Este é o link no CodeSandbox: chamada de gancho inválida .

Por quê? Por causa do código abaixo, que está errado:

ReactDOM.render(App(), rootElement);

Deveria ter sido:

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

Para mais informações, você deve ler Rule of Hooks - React

Espero que isto ajude!

Use Letra maiúscula para definir o nome do componente funcional / React hooks componentes personalizados. "const 'app' deve 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]

Etapa 1: Altere o nome do arquivo src / App.js para src / app.js

Etapa 2: clique em "Sim" para "Atualizar importações para app.js".

Etapa 3: Reinicie o servidor novamente.

Sempre que trabalhar com um componente funcional React, mantenha sempre a primeira letra do nome do componente em maiúsculas para evitar esses erros do React Hooks.

No seu caso, você nomeou o componente app, que deve ser alterado para App, como eu disse acima, para evitar o erro 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} />
    </>
    );
}

Na função do aplicativo, você digitou a palavra incorretamente setpersonSate, faltando a letra t, assim deve ser setpersonState.

Erro :

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

Solução :

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

Isso ocorre devido à regra ESLint para React Hooks. Encontre o link da regra aqui:

Regra ESLint para ganchos de reação

A partir de agora, a regra está descrita na linha no. 44

Não use a função de seta para criar componentes funcionais.

Faça como um dos exemplos abaixo:

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

Se você tiver problemas com "ref"(provavelmente em loops), a solução é 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 })}
    />
  );
});