React 함수 구성 요소 또는 사용자 지정 React Hook 함수가 아닌 함수 "app"에서 React Hook "useState"를 호출합니다.
리액트 훅을 사용하여 간단한 문제를 해결하려고 합니다.
const [personState,setPersonState] = useState({ DefinedObject });
다음과 같은 종속성이 있습니다.
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0"
}
그래도 다음 오류가 나타납니다.
./src/App.js
7 회선:
Hook react-hooks "useState"가 함수 "에서 호출됩니다.39 § 39:
는 정의되어 있지 .
상태각 오류에 대한 자세한 내용을 보려면 키워드를 검색하십시오.
컴포넌트 코드는 다음과 같습니다.
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 App=(props)=><div>Hey</div>
class App extends React.Component{
render(){
return <div>Hey</div>
}
}
React는 이 의미에 따라 사용자 정의 컴포넌트를 식별합니다.React의 JSX는 돔 노드의 객체 표현을 반환하는 React.createElement 함수로 변환됩니다.이 객체의 유형 속성은 이 객체가 사용자 정의 구성 요소인지 div와 같은 돔 요소인지를 나타냅니다.따라서 이 의미론을 따르는 것이 중요하다.
useState 훅은 기능 컴포넌트(또는 커스텀훅) 내에서만 사용할 수 있기 때문에 리액션이 처음부터 사용자 정의 컴포넌트로 식별할 수 없기 때문에 오류가 발생하는 것입니다.
useState는 로직 재사용 및 추상화에 사용되는 커스텀훅 내부에서도 사용할 수 있습니다.따라서 훅 규칙에 따라 커스텀훅의 이름은 "use" 접두사로 시작해야 하며 camelCase여야 합니다.
const 앱 대신 const 앱 사용
앱 이름을 대문자로 표시해 보십시오.
const App = props => {...}
export default App;
"React Hook "useState"가 React 함수 구성 요소도 사용자 정의 React Hook 함수도 아닌 함수 "App"에서 호출됩니다."라는 오류가 표시됩니다.
솔루션:기본적으로 함수를 대문자로 만들어야 합니다.
예를 들어 다음과 같습니다.
const Helper =()=>{}
function Helper2(){}쓴 것이였습니다.앱의 A를 대문자로 쓴 것이 문제였습니다.export export:, export:,export default App;앱이다
함수의 첫 번째 문자는 대문자여야 합니다.
컴포넌트는 대문자로 시작해야 합니다.또한 내보낼 줄의 첫 번째 문자를 변경해야 합니다.
올바른 수입품을 가지고 계십니까?
import React, { useState } from 'react';
함수 이름은 대문자로 시작해야 합니다.
예:
const App = props => {
}
not const 앱
리액트 컴포넌트명은 대문자로 하고 커스텀훅 함수는 리액트훅 함수로 식별하기 위한 use 키워드로 시작해야 합니다.
앱 컴포넌트를 앱에 캐피털라이즈합니다.
당신의 코드
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;
잘 될 거야, 고마워
저도 같은 문제가 있었지만, 앱에서는 그렇지 않았습니다.커스텀 클래스가 있었는데 함수명을 소문자로 시작했기 때문에 에러가 발생하였습니다.
함수명과 내보내기 행의 첫 글자를 Camel Case로 변경해, 에러가 없어졌다.
제 경우 최종 결과는 다음과 같습니다.
function Document() {
....
}
export default Document;
이것이 내 문제를 해결했다.
JSX에서는 소문자 태그명이 html 네이티브컴포넌트로 간주됩니다.반응하려면 기능을 반응 구성 요소로 인식해야 합니다. 이름을 대문자로 표시해야 합니다.
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"
다음 오류의 경우 컴포넌트의 첫 글자를 like로 대문자로 표시하고 내보내기도 대문자로 합니다.
const App = props => {
...}
export default App;
앱 캐피털라이즈 앱은 반드시 동작합니다.
해결방법은 이미 유키가 지적한 바와 같이 컴포넌트명을 대문자로 하는 것입니다."기본" 앱 구성 요소뿐만 아니라 모든 구성 요소도 대문자로 표시해야 합니다.
const Person = () => {return ...};
export default Person;
이는 eslint-plugin-react-hooks 패키지, 특히 RulesOfHooks.js 스크립트 내의 isComponentName() 함수에 의한 것입니다.
버그를 피하기 위해 Hooks 규칙을 적용하는 ESLint 플러그인을 제공합니다."use"로 시작하는 함수와 그 바로 뒤에 대문자가 있는 함수가 후크라고 가정합니다.우리는 이 휴리스틱이 완벽하지 않고 잘못된 긍정도 있을 수 있다는 것을 알고 있습니다.그러나 생태계 전체의 규약이 없으면 Hooks를 잘 작동시킬 수 없습니다.또한 긴 이름은 Hooks를 채택하거나 Hooks를 따르는 것을 주저하게 됩니다.
먼저 컴포넌트의 첫 글자를 대문자로 해야 합니다.이 경우 앱은 App, 사람은 Person이어야 합니다.
문제를 찾기 위해 당신의 코드를 복사하려고 했습니다.앱 컴포넌트 호출 방법을 공유하지 않았기 때문에 문제가 발생할 수 있는 방법은 한 가지뿐입니다.
이것은 Code Sandbox: Invalid 훅 콜 링크입니다.
왜? 다음 코드가 잘못되어 있습니다.
ReactDOM.render(App(), rootElement);
다음과 같이 해야 합니다.
ReactDOM.render(<App />, rootElement);
자세한 내용은 Rule of Hooks - React를 참조하십시오.
이게 도움이 됐으면 좋겠네요!
React 기능 컴포넌트를 사용할 때는 항상 컴포넌트 이름의 첫 글자를 대문자로 유지하여 이러한 React Hook 오류를 방지하십시오.
이 경우 컴포넌트에 이름을 붙였습니다.app로 변경해야 합니다.App리액트 훅 에러를 피하기 위해서입니다.
기능 컴포넌트명을 정의하려면 대문자를 사용합니다./ 리액트 훅 커스텀 컴포넌트를 정의합니다.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 App = props => {
...
};
export default App;`
순서 1: 파일명 src/App.js를 src/app.js로 변경합니다.
순서 2: "App.js의 Import 업데이트"에서 "예"를 클릭합니다.
순서 3: 서버를 재기동합니다.
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} />
</>
);
}
아직 이 질문에 대한 답을 찾고 있다면 위의 모든 솔루션이 정상적으로 작동하지만, 그래도 아래 실행/정확한 코드를 제공하겠습니다(편집).
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 (
<div className="App">
<h1>Nice two one three Hello i am a noob react developer</h1>
<button onClick={switchNameHandler}>Switch Name</button>
<Person name={personsState.persons[0].name} age={personsState.persons[0].age} />
<Person name={personsState.persons[1].name} age={personsState.persons[1].age}> My hobbies are Gaming</Person>
<Person name={personsState.persons[2].name} age={personsState.persons[2].age} />
</div>
);
// return React.createElement('div',{className:'App'}, React.createElement('h1', null, 'Hi learning the basics of react'));
}
export default App;
언급URL : https://stackoverflow.com/questions/55846641/react-hook-usestate-is-called-in-function-app-which-is-neither-a-react-funct
'programing' 카테고리의 다른 글
| 메인 클래스를 찾을 수 없습니다.bootRepackage (0) | 2023.03.08 |
|---|---|
| jquery ajax의 async:false와 async:true의 차이점은 무엇입니까? (0) | 2023.03.08 |
| HTML 조각의 내용 유형 (0) | 2023.03.08 |
| 도커 Mongo 데이터 볼륨 설정 방법 (0) | 2023.03.08 |
| 워드프레스워드프레스img 태그 없이img 태그 없이 (0) | 2023.03.08 |