React Hook „useState” jest wywoływany w funkcji „app”, która nie jest ani komponentem funkcji React, ani niestandardową funkcją Hook React

Próbuję użyć haków reagowania do prostego problemu

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

z następującymi zależnościami.

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

ale nadal otrzymuję następujący błąd:

./src/App.js

Wiersz 7:
React Hook „useState” jest wywoływany w funkcji „app”, która nie jest ani składnikiem funkcji React, ani niestandardową funkcją React Hook React-hooks / rules-of-hooks

Wiersz 39:
„stan” nie jest zdefiniowany
no-undef

Wyszukaj słowa kluczowe, aby dowiedzieć się więcej o każdym błędzie.

Kod komponentu znajduje się poniżej:

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;

Składnik osoby

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; 

Spróbuj użyć słowa „aplikacja” wielkimi literami, np

const App = props => {...}

export default App;

W Reakcie komponenty muszą być pisane wielkimi literami, a niestandardowe hooki muszą zaczynać się od use.

Wydaje mi się, że robimy ten sam kurs w Udemy.

Jeśli tak, po prostu zamień

const app

Do

const App

Zrób tak dobrze, jak dla

export default app

Do

export default App

To działa dobrze dla mnie.

O ile wiem, w tym pakiecie znajduje się linter. I wymaga, aby komponent zaczynał się od postaci Capital. Proszę sprawdź to.

Jednak jak dla mnie to smutne.

Użyj dużej litery w nazwie funkcji.

function App(){}

Użyj const App zamiast const app

Po prostu spróbuj wpisać wielką literę nazwę aplikacji

const App = props => {...}

export default App;

Otrzymujesz ten błąd: „React Hook” useState ”jest wywoływany w funkcji„ App ”, która nie jest ani komponentem funkcji React, ani niestandardową funkcją React hook”

Rozwiązanie: po prostu musisz wykorzystać funkcję.

Na przykład:

const Helper =()=>{}

function Helper2(){}

Pierwsza litera funkcji powinna być wielką literą

Miałem ten sam problem. okazuje się, że problemem było wykorzystanie „A” w „aplikacji”. Ponadto, jeśli eksportujesz: export default App;pamiętaj, aby wyeksportować również tę samą nazwę „Aplikacja”.

Komponenty powinny zaczynać się wielkimi literami. Pamiętaj również, aby zmienić pierwszą literę w linii do eksportu!

Czy masz odpowiedni import?

import React, { useState } from 'react';

Nazwy komponentów React powinny być pisane wielkimi literami, a niestandardowe funkcje przechwytujące powinny zaczynać się od użycia słowa kluczowego aby zidentyfikować je jako reakcję.

Dlatego wykorzystaj komponenty aplikacji do App

Miałem ten sam problem, ale nie z aplikacją. Miałem klasę niestandardową, ale użyłem małej litery do rozpoczęcia nazwy funkcji, a także otrzymałem błąd.

Zmieniono pierwszą literę nazwy funkcji i linii eksportu na CamelCase i zniknął błąd.

w moim przypadku efekt końcowy wyglądał mniej więcej tak:

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

to rozwiązało mój problem.

Rozwiązanie jest proste, poprawna „aplikacja” i napisz „Aplikacja” z pierwszą wielką literą.

Skonfiguruj aplikację, aby aplikacja na pewno zadziała.

W JSX nazwa znacznika zapisana małymi literami jest traktowana jako natywny komponent HTML. Aby zareagować i rozpoznać funkcję jako komponent React, należy wpisać wielką literę w nazwie.

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

Wymień to

export default app;

z tym

export default App;

Zmień nazwę funkcji na wielką. To działa dla mnie.

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"

W przypadku następującego błędu wpisz wielką literę komponentu, podobnie jak, a także eksportuj.

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

Rozwiązaniem, jak już wskazał Yuki, jest użycie wielkiej litery w nazwie komponentu. Należy pamiętać, że nie tylko „domyślny” składnik aplikacji musi być pisany wielkimi literami, ale wszystkie komponenty:

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

export default Person;

Wynika to z pakietu eslint-plugin-aware-hooks, a konkretnie funkcji isComponentName () wewnątrz skryptu RulesOfHooks.js.

Oficjalne wyjaśnienie z często zadawanych pytań dotyczących hooków :

Zapewniamy wtyczkę ESLint, która wymusza reguły hooków, aby uniknąć błędów. Zakłada, że ​​każda funkcja zaczynająca się od „use” i dużej litery zaraz po niej jest hookiem. Zdajemy sobie sprawę, że ta heurystyka nie jest idealna i mogą występować fałszywe alarmy, ale bez konwencji obejmującej cały ekosystem nie ma sposobu, aby hooki działały dobrze - a dłuższe nazwy zniechęcą ludzi do przyjęcia hooków lub przestrzegania konwencji.

Przede wszystkim musisz wpisać wielką literę pierwszej litery swoich komponentów, w twoim przypadku aplikacja powinna być aplikacją, a osoba powinna być osobą .

Próbowałem skopiować twój kod w nadziei znalezienia problemu. Ponieważ nie podałeś, jak nazywasz komponent aplikacji , widzę tylko jeden sposób, aby doprowadzić to do problemu.

To jest link w CodeSandbox: Invalid hook call .

Czemu? Z powodu poniższego kodu, który jest nieprawidłowy:

ReactDOM.render(App(), rootElement);

Powinno być:

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

Aby uzyskać więcej informacji, przeczytaj artykuł Reguła hooków - reaguj

Mam nadzieję że to pomoże!

Użyj dużej litery do zdefiniowania nazwy komponentu funkcjonalnego / React przechwytuje komponenty niestandardowe. „const 'app' powinno być 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]

Krok 1: Zmień nazwę pliku src / App.js na src / app.js

Krok 2: Kliknij „Tak” dla „Aktualizuj import dla app.js”.

Krok 3: Ponownie uruchom serwer ponownie.

Podczas pracy z komponentem funkcjonalnym Reacta, zawsze zachowuj pierwszą literę nazwy komponentu wielkimi literami, aby uniknąć błędów związanych z hookami reakcji.

W twoim przypadku nazwałeś komponent app, który powinien zostać zmieniony na App, jak powiedziałem powyżej, aby uniknąć błędu przechwytywania reakcji.

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

W funkcji aplikacji błędnie wpisałeś słowo bez setpersonSatelitery t, tak powinno być setpersonState.

Błąd :

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

Rozwiązanie :

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

Dzieje się tak z powodu reguły ESLint dla React hooków. Tutaj znajdziesz link do reguły:

Reguła ESLint dla React hooków

Od teraz reguła jest opisana w wierszu nr. 44.

Nie używaj funkcji strzałek do tworzenia funkcjonalnych komponentów.

Wykonaj jeden z poniższych przykładów:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

Lub

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

Jeśli masz problemy z "ref"(prawdopodobnie w pętlach), rozwiązaniem jest użycie 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 })}
    />
  );
});