Я пытаюсь использовать перехватчики реакции для простой задачи

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" вызывается в функции "приложение", которое не является ни функциональным компонентом React, ни пользовательским React. Функция перехвата, 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 (
        

This is react

); }; export default app;

Персональный компонент

import React from 'react'; 

const person = props => { 
    return( 
        

i am {props.name}

i am {props.age} years old

{props.children}

) }; export default person;

Bishnu

Ответов: 35

Ответы (35)

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

import React, { useState } from 'react';

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

Однако, как по мне, это печально.

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

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

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

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

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

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

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

Шаг-1: Измените имя файла src / App.js на src / app.js

Шаг-2: Нажмите «Да» для «Обновить импорт для app.js».

Шаг-3: Снова перезапустите сервер.

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

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

export default Person;

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

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

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

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

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

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

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

ReactDOM.render(App(), rootElement);

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

ReactDOM.render(, rootElement);

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

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

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

Используйте приложение const вместо приложения const

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

В вашем случае вы назвали компонент app, который следует изменить на App, как я сказал выше, чтобы избежать ошибки React Hook.

Замените это

export default app;

с этим

export default App;

In the app function you have incorrectly spelled the word setpersonSate, missing the letter t, thus it should be setpersonState.

Ошибка:

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

Решение:

const app = props => { 
        const [personState, setPersonState] = useState({....
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;

Может быть, вы добавили useEffect, который зависит от условия перед тем, без условия

Пример:

useEffect(() => {
  _anyFunction();
}, []);
    
useEffect(()=> {
  anyCode....
}, [response]);

Используйте заглавную букву для определения имени функционального компонента / 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 (
      
First Second Third ); }; export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        

My name is {props.name} and my age is {props.age}

My name is {props.name} and my age is {props.age} and {props.children}

{props.children}

) };

[ReactHooks] [useState] [ReactJs]

Попробуйте изменить название app на App

const App = props => {   
  ...
};  
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 (
        

This is react

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

This is react

); }; export default App;

заработает Спасибо.

имя функции должно начинаться с заглавной буквы

Например:

const App = props => {

}

не const приложение

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

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

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

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

const App = props => {...}

export default App;

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

function ({person}) {
  const name={person.name}
  return (
    

{name}

) }

Используйте заглавную первую букву в имени функции.

function App(){}

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

Сделать имя функции заглавным. У меня это работает.

export default function App() { }

Если вы все еще ищете ответ на этот вопрос, все вышеперечисленное решение работает нормально, но я все же предоставлю текущий / правильный код ниже (отредактировано)

import React, { useState } from 'react';
import './App.css';
import Person from './Person/Person'

  const App = props => {
    const [personsState, setPersonsState ] = useState({
      persons:[
        {name: 'Ram', age: 20},
        {name: 'Rahul', age: 24},
        {name: 'Ramesh', age: 25}
      ],
      otherState: 'Some Other value' 
    });

    const switchNameHandler = () => {
      //console.log('Click is working');
      //Dont Do THIS: this.state.persons[0].name = 'singh';
      setPersonsState({
        persons:[
        {name: 'Ram',age: 20},
        {name: 'Raj', age: 24},
        {name: 'yts', age: 30} 
      ]
    });
    };

    return (
      

Nice two one three Hello i am a noob react developer

My hobbies are Gaming
); // return React.createElement('div',{className:'App'}, React.createElement('h1', null, 'Hi learning the basics of react')); } export default 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  expression, Foo must be in scope.

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

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

const App = props => {...}

export default App;

В React компоненты должны начинаться с заглавной буквы, а пользовательские хуки должны начинаться с использовать.

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

Итак, используйте компоненты app с заглавными буквами до App

Думаю, вы выберете тот же курс, что и я, потому что вы используете в нем точно такое же имя переменных, на самом деле вам здесь не хватает небольшой вещи, а именно: вы меняете имя своего приложения с нижним регистром

export default app

есть небольшая ошибка, которая также меняет имя в index.js, вы меняете имя здесь, в App.js, но забыли изменить его в index.js, вы все еще импортируете его вот так

import App from './App.js'

, значит, вам также пришлось сменить имя там

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

const App=(props)=>
Hey
class App extends React.Component{ render(){ return
Hey
} }

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

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

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

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

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

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

  return (
     setStates({ value: event.target.value })}
    />
  );
}

или

//IMPORTANT: Repeat the function name

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

  return (
     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 (
     setStates({ value: event.target.value })}
    />
  );
});

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

Решение: вам в основном нужно использовать функцию с заглавной буквы.

Например:

const Helper = () => {}

функция Helper2 () {}

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

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

с заглавной буквы.

приложение const

Кому

const Приложение

Как и для

export default app

Кому

export default App

У меня работает хорошо.

2022 WebDevInsider