React Hook "useState" вызывается в функции "app", которая не является ни компонентом функции React, ни пользовательской функцией React Hook

Ответ 1

Попробуйте использовать "приложение" с заглавной буквы, например

const App = props => {...}

export default App;

Ответ 2

Я чувствую, что мы делаем тот же курс в Удеми.

Если это так, просто используйте

const app

к

const App

Делай так же как и для

export default app

к

export default App

Это хорошо работает для меня.

Ответ 3

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

Однако, как по мне, это грустно.

Ответ 4

Вы получаете эту ошибку: "React Hook" useState "вызывается в функции" App ", которая не является ни компонентом функции React, ни пользовательской функцией React Hook"

Решение. В основном вам нужно использовать заглавные буквы.

Например:

const Helper =()=>{}

function Helper2(){}

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

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

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

Ответ 8

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

import React, { useState } from 'react';

Ответ 9

Эта ошибка происходит из-за пакета eslint-plugin-Reaction-hooks, который был добавлен create-реагировать-приложение во время создания приложения реакции.

добавьте строку комментария ниже, как показано ниже,

//eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => {
   ....
}, []);

Или

//eslint-disable-next-line react-hooks/rules-of-hooks
const [value, setState] = useState(false);

Ответ 10

То же самое исправление (изменение на заглавную "A" приложение) работает для меня

const App = props => { }

, ,

export default App;

Ответ 11

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

Ответ 12

Решение, как уже указывал Юки, состоит в том, чтобы использовать имя компонента с большой буквы. Важно отметить, что капитализировать нужно не только компонент приложения "по умолчанию", но и все компоненты:

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

export default Person;

Это связано с пакетом eslint-plugin-Reaction-hooks, в частности с функцией isComponentName() внутри скрипта RulesOfHooks.js.

Официальное объяснение из часто задаваемых вопросов Hooks:

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

Ответ 13

Прежде всего, вам нужно прописать FirstLetter ваших компонентов в верхнем регистре, в вашем случае приложение должно быть приложением, а лицо должно быть человеком.

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

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

Почему? Из-за кода ниже, который является неправильным:

ReactDOM.render(App(), rootElement);

Это должно было быть:

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

Для получения дополнительной информации вы должны прочитать Rule of Hooks - React

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

Ответ 14

используйте заглавную букву в имени функции. Например: - приложение функции {}