React Hook «useState» вызывается в функции «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:
React Hook «useState» вызывается в функции «app», которая не является ни компонентом функции React, ни настраиваемой функцией React Hook. React-hooks / rules-of-hooks.

Строка 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(){}

Первый символ вашей функции должен быть прописным

Я была такая же проблема. Оказывается, проблема заключалась в использовании заглавной буквы «А» в «приложении». Кроме того, если вы делаете экспорт: export default App;убедитесь, что вы экспортируете одноименное «приложение».

Компоненты должны начинаться с заглавных букв. Также не забудьте изменить первую букву в строке для экспорта!

У вас правильный импорт?

import React, { useState } from 'react';

Имена компонентов React должны начинаться с заглавной буквы, а пользовательские функции перехватчиков должны начинаться с ключевого слова use, чтобы идентифицировать их как функцию перехвата реакции.

Итак, используйте компоненты вашего приложения в App

У меня была такая же проблема, но не с приложением. У меня был собственный класс, но я использовал строчную букву для начала имени функции, а также получил ошибку.

Изменил первую букву имени функции и строку экспорта на CamelCase, и ошибка исчезла.

в моем случае конечный результат был примерно таким:

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

это решило мою проблему.

Решение простое: исправьте «app» и напишите «App» с первым символом в верхнем регистре.

Сделать приложение заглавным, чтобы приложение наверняка сработало.

В 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-response-hooks, в частности с функцией isComponentName () внутри скрипта RulesOfHooks.js.

Официальное объяснение из FAQ по хукам :

Мы предоставляем плагин ESLint, который применяет правила хуков, чтобы избежать ошибок. Предполагается, что любая функция, начинающаяся с «использовать» и заглавной буквы сразу после нее, является хуком. Мы признаем, что эта эвристика несовершенна и могут быть некоторые ложные срабатывания, но без соглашения в масштабах всей экосистемы просто невозможно заставить хуки работать хорошо, а более длинные имена будут отбивать у людей желание либо принять хуки, либо следовать соглашению.

Прежде всего, вам нужно указать FirstLetter ваших компонентов в верхнем регистре, в вашем случае app должно быть App, а person - Person .

Я попытался скопировать ваш код в надежде найти проблему. Поскольку вы не рассказали, как вы вызываете компонент приложения , я вижу только один способ привести к проблеме.

Это ссылка в CodeSandbox: Неверный вызов ловушки .

Зачем? Из-за неправильного кода ниже:

ReactDOM.render(App(), rootElement);

Должно было быть:

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

Для получения дополнительной информации вы должны прочитать Правило хуков - Реагировать.

Надеюсь это поможет!

Используйте заглавную букву для определения имени функционального компонента / пользовательских компонентов React перехватывает. «const 'app' должно быть 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]

Шаг 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.

Компоненты React (как функциональные, так и классовые) должны начинаться с заглавной буквы. подобно

const App=(props)=><div>Hey</div>

class App extends React.Component{
   render(){
     return <div>Hey</div>
   }
}

React идентифицирует определенные пользователем компоненты, следуя этой семантике. JSX React преобразуется в функцию React.createElement, которая возвращает объектное представление узла dom. Свойство type этого объекта сообщает, является ли он определяемым пользователем компонентом или элементом dom, таким как div. Поэтому важно следовать этой семантике.

Поскольку ловушка useState может использоваться только внутри функционального компонента (или настраиваемой ловушки), это причина того, что вы получаете сообщение об ошибке, потому что реакция не может идентифицировать ее как определяемый пользователем компонент.

useState также может использоваться внутри настраиваемых хуков, которые используются для повторного использования и абстракции логики. Итак, согласно правилам хуков, имя кастомного хука должно начинаться с префикса "use" и должно быть в верблюжьем регистре.

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

Сделайте как один из примеров ниже:

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