"UseState" React Hook викликається у функції "app", яка не є ні компонентом функції React, ні спеціальною функцією React Hook

Я намагаюся використовувати гачки для реагування для простої проблеми

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

з наступними залежностями.

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

але я все одно отримую таку помилку:

./src/App.js

Рядок 7:
"useState" React Hook викликається у функції "app", яка не є ні функціональним компонентом React, ні спеціальною функцією React Hook, реагують-гаками / правилами-гаками

Рядок 39:
"стан" не визначено
no-undef

Шукайте ключові слова, щоб дізнатися більше про кожну помилку.

Код компонента знаходиться нижче:

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;

Особовий компонент

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; 

Спробуйте заздалегідь використати велику кількість "додатка"

const App = props => {...}

export default App;

У React компоненти повинні бути використані з великої літери, а користувацькі гачки потрібно починати use.

Я відчуваю, що ми робимо той самий курс в Удемі.

Якщо так, просто використовуйте великі літери

const app

До

const App

Так само, як і для

export default app

До

export default App

Це добре працює для мене.

Наскільки мені відомо, в цей пакет входить лайнер. І це вимагає, щоб компонент повинен починатися з капіталу. Будь ласка, перевірте це.

Однак, як на мене, це сумно.

Використовуйте велику літеру першої літери у назві функції.

function App(){}

Використовуйте додаток const замість const

Просто спробуйте заздалегідь використати великі літери на ім’я програми

const App = props => {...}

export default App;

Ви отримуєте цю помилку: "Функція React Hook" useState "викликається у функції" App ", яка не є ні компонентом функції React, ні спеціальною функцією React Hook"

Рішення: В основному вам потрібно використовувати велику капіталізацію функції.

Наприклад:

const Helper =()=>{}

function Helper2(){}

Першим символом вашої функції повинен бути верхній регістр

У мене було те саме питання. виявляється, що велике використання "A" в "App" було проблемою. Крім того, якщо ви здійснюєте експорт: export default App;переконайтесь, що ви експортуєте те саме ім’я "Додаток".

Компоненти повинні починатися з великої літери. Також не забудьте змінити першу букву в рядку для експорту!

Ви маєте право імпортувати?

import React, { useState } from 'react';

Імена реактивних компонентів мають бути написані з великої літери, а функції користувацьких гачків повинні починатися з використання ключового слова щоб ідентифікувати функцію реагування на гак.

Таким чином, капіталізувати свої додатки компонентів в App

У мене була та сама проблема, але не з додатком. У мене був власний клас, але я використав малу літеру для запуску імені функції, а також отримав помилку.

Змінено першу букву назви функції та рядок експорту на CamelCase та помилка.

у моєму випадку кінцевий результат був чимось на кшталт:

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

це вирішило мою проблему.

Рішення просте, правильне "додаток" і напишіть "Додаток" з першим символом у верхньому регістрі.

Капіталізуйте додаток на додаток, безумовно, спрацює.

У JSX найменше регістр ім'я тегів розглядається як основний компонент html. Для того, щоб реагувати розпізнати функцію як компонент React, потрібно використовувати велику літеру.

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

Замініть це

export default app;

з цим

export default App;

Зробіть назву функції капіталу. Це працює для мене.

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"

Для наступної помилки використовуйте велику літеру, наприклад, першу букву компонента, а також експорт також.

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

Рішення, як уже зазначав Юкі, полягає у використанні великої літери назви компонента. Важливо зауважити, що не тільки "за замовчуванням" компонент програми має потребувати великих літер, але всі компоненти:

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

export default Person;

Це пов'язано з пакетом eslint-plugin-react-hooks, зокрема функцією isComponentName () всередині скрипту RulesOfHooks.js.

Офіційне пояснення від FAQ щодо гачків :

Ми надаємо плагін ESLint, який застосовує правила Hooks, щоб уникнути помилок. Він передбачає, що будь-яка функція, що починається з «використання» та великої літери, відразу після неї - Гак. Ми визнаємо, що це евристика не є досконалою, і можуть бути помилкові позитиви, але без загальноекологічної конвенції просто неможливо змусити Гачки працювати добре - і довші імена будуть відштовхувати людей від прийняття Гаків або дотримання конвенції.

Перш за все, вам потрібно прописати Перший лист своїх компонентів, у вашому випадку додаток має бути додаток, а людина повинна бути особою .

Я спробував скопіювати ваш код у надії знайти проблему. Оскільки ви не поділилися тим, як ви називаєте компонент програми , я бачу лише один спосіб вирішити це питання.

Це посилання в CodeSandbox: Недійсний дзвінок на гачок .

Чому? Через код, нижче якого неправильно:

ReactDOM.render(App(), rootElement);

Це повинно було бути:

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

Для отримання додаткової інформації вам слід прочитати Правило гачків - реагуйте

Сподіваюся, це допомагає!

Використовуйте велику літеру для визначення імені функціонального компонента / користувацьких компонентів React hooks. "const" додаток "має бути const" додаток ".

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]

Крок 1: Змініть ім'я файлу src / App.js на src / app.js

Крок 2: Клацніть на "Так" для "Оновити імпорт для app.js".

Крок 3: Перезавантажте сервер ще раз.

Щоразу, коли ви працюєте з функціональним компонентом React, завжди зберігайте першу букву імені компонента у верхній регістрі, щоб уникнути цих помилок React Hooks.

У вашому випадку ви назвали компонент app, який слід змінити App, як я вже говорив вище, щоб уникнути помилки 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} />
    </>
    );
}

У функції програми ви неправильно написали слово setpersonSate, пропустивши букву t, таким чином воно повинно бути setpersonState.

Помилка :

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

Рішення :

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

Це відбувається через правило ESLint для React Hooks. Знайдіть посилання правила тут:

Правило ESLint для React Hooks

На сьогодні правило описано у рядку №. 44.

Не використовуйте функцію стрілки для створення функціональних компонентів.

Зробіть один із прикладів нижче:

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

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

Або

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

Якщо у вас є проблеми з "ref"(можливо, в циклі), рішенням є використання 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 })}
    />
  );
});