React Hook "useState" вызывается в функции "app", которая не является ни компонентом функции React, ни пользовательской функцией React Hook
Я пытаюсь использовать реакционные крючки для простой задачи
const[personState,setPersonSate]= 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 response-hooks/rules-of-hooksСтрока 39:
"состояние" не определено
нет-UNDEFПоиск по ключевым словам, чтобы узнать больше о каждой ошибке.
38 ответов
Попробуйте использовать "приложение" с заглавной буквы
const App = props => {...}
приложение по умолчанию для экспорта;
Я чувствую, что мы делаем тот же курс в Удеми.
Если это так, просто используйте
const app
к
const App
Делай так же как и для
export default app
к
export default App
Это хорошо работает для меня.
Насколько я знаю, в эту комплектацию входит линтер. И это требует, чтобы ваша составляющая начиналась с заглавной буквы. Пожалуйста, проверь это.
Однако, как по мне, это грустно.
Используйте заглавные буквы в имени функции.
function App(){}
Компоненты 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" и должно быть в верблюжьем регистре.
Просто попробуйте использовать имя своего приложения с заглавной буквы
const App = props => {...}
export default App;
Вы получаете эту ошибку: "React Hook "useState"вызывается в функции"App", которая не является ни компонентом функции React, ни пользовательской функцией React Hook"
Решение: вам в основном нужно использовать заглавные буквы.
Например:
const Helper =()=>{}
function Helper2(){}Я была такая же проблема. Оказывается, что заглавная буква "А" в "приложении" была проблемой. Кроме того, если вы делаете экспорт: export default App; убедитесь, что вы экспортируете то же имя "приложение", а также.
Компоненты должны начинаться с заглавных букв. Также не забудьте изменить первую букву в строке для экспорта!
имя функции должно начинаться с заглавной буквы
Например:
const App = props => {
}
не константное приложение
ваш код
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, {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, { useState } from 'react';
Имена компонентов React должны начинаться с заглавной буквы, а пользовательские функции хуков должны начинаться с ключевого слова use, чтобы идентифицировать их как функцию перехвата.
Итак, используйте компоненты вашего приложения в 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.
Решение простое, правильное "app" и напишите "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 app = props => { }. В «приложении» «а» написано в нижнем регистре, вы должны попробовать его, чтобы использовать « приложение ».
- Когда тип элемента начинается со строчной буквы, он относится к встроенному компоненту, например
<div>или<span>и приводит к строке ' div ' или ' span ', переданной вReact.createElement. Типы, начинающиеся с заглавной буквы, например<Foo />скомпилировать вReact.createElement(Foo)и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript. - React рекомендует называть компоненты с большой буквы . Если у вас есть компонент, начинающийся со строчной буквы, назначьте его переменной с заглавной буквы, прежде чем использовать его в JSX.
Для получения более подробной информации вы можете проверить Официальный документ Нажмите здесь
Попробуйте изменить название приложения, например
`const useApp = props => {
.
.
.
};
export default app;`
Это из-за правила ESLint для React Hooks. Найдите ссылку на правило здесь:
Правило ESLint для React Hooks
На данный момент правило описано в строке № 44.
Прежде всего, вам нужно прописать FirstLetter ваших компонентов в верхнем регистре, в вашем случае приложение должно быть App, а person - Person.
Я пытался скопировать ваш код в надежде найти проблему. Поскольку вы не поделились тем, как вы называете компонент приложения, я вижу только один способ привести это к проблеме.
Это ссылка в CodeSandbox: Неверный вызов ловушки.
Почему? Из-за кода ниже, который является неправильным:
ReactDOM.render(App(), rootElement);
Это должно было быть:
ReactDOM.render(<App />, rootElement);
Для получения дополнительной информации вы должны прочитать Правило крючков - React
Надеюсь это поможет!
Используйте заглавную букву для определения имени функционального компонента / пользовательских компонентов 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]
Решение, как уже указывал Юки, состоит в том, чтобы использовать имя компонента с большой буквы. Важно отметить, что капитализировать нужно не только компонент приложения "по умолчанию", но и все компоненты:
const Person = () => {return ...};
export default Person;
Это связано с пакетом eslint-plugin-Reaction-hooks, в частности, функцией isComponentName() внутри скрипта RulesOfHooks.js.
Официальное объяснение от часто задаваемых вопросов Hooks:
Мы предоставляем плагин ESLint, который применяет правила хуков, чтобы избежать ошибок. Предполагается, что любая функция, начинающаяся с "use" и заглавная буква сразу после нее, является Hook. Мы признаем, что эта эвристика не идеальна, и могут быть некоторые ложные срабатывания, но без общесистемного соглашения просто невозможно заставить Hooks работать хорошо - и более длинные имена будут препятствовать людям принимать Hooks или следовать соглашению.
При работе с функциональным компонентом React всегда сохраняйте первую букву имени компонента в верхнем регистре, чтобы избежать этих ошибок React Hooks.
В вашем случае вы назвали компонент app, который следует заменить на App, как я уже сказал выше, чтобы избежать ошибки React Hook.
Шаг 1. Измените имя файла src/App.js на src/app.js
Шаг 2: Нажмите "Да" для "Обновить импорт для app.js".
Шаг 3: перезапустите сервер снова.