React Hook“useState”는 React 함수 컴포넌트 나 커스텀 React Hook 함수가 아닌“app”함수에서 호출됩니다.

간단한 문제에 반응 후크를 사용하려고합니다.

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 Hook 함수가 아닌 "app"함수에서 호출됩니다. react-hooks / rules-of-hooks

39 행 :
'state'는 정의
되지 않음

각 오류에 대해 자세히 알아 보려면 키워드를 검색하십시오.

구성 요소 코드는 다음과 같습니다.

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.

Udemy에서 같은 과정을하고있는 것 같습니다.

그렇다면 대문자로

const app

에

const App

뿐만 아니라

export default app

에

export default App

그것은 나를 위해 잘 작동합니다.

내가 아는 한 linter가이 패키지에 포함되어 있습니다. 그리고 그것은 당신이 대문자에서 시작해야한다는 것을 요구합니다. 확인해주세요.

그러나 나에게는 슬프다.

함수 이름에 첫 글자 대문자를 사용하십시오.

function App(){}

const 앱 대신 const 앱 사용

앱 이름을 대문자로 바꾸십시오.

const App = props => {...}

export default App;

이 오류가 발생합니다. "React Hook"useState "가 React 함수 구성 요소도 아니고 사용자 지정 React Hook 함수도 아닌"App "함수에서 호출되었습니다."

솔루션 : 기본적으로 함수를 자본화해야합니다.

예를 들면 :

const Helper =()=>{}

function Helper2(){}

함수의 첫 번째 문자는 대문자 여야합니다.

나는 같은 문제가 있었다. "앱"에서 "A"를 대문자로 사용하는 것이 문제였습니다. 또한 내보내는 경우 : export default App;동일한 이름 인 "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;

Yuki가 이미 지적했듯이 해결책은 구성 요소 이름을 대문자로 바꾸는 것입니다. "기본"앱 구성 요소뿐만 아니라 모든 구성 요소를 대문자로 표기해야한다는 점에 유의해야합니다.

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

export default Person;

이것은 eslint-plugin-react-hooks 패키지, 특히 isComponentName () 때문입니다. RulesOfHooks.js 스크립트 내의 isComponentName 함수 때문입니다.

Hooks FAQ의 공식 설명 :

버그를 방지하기 위해 후크 규칙을 적용하는 ESLint 플러그인을 제공합니다. "use"로 시작하는 함수와 바로 뒤의 대문자가 Hook이라고 가정합니다. 우리는이 휴리스틱이 완벽하지 않고 오 탐지가있을 수 있다는 것을 알고 있지만, 생태계 전반에 걸친 관례 없이는 후크를 잘 작동시킬 방법이 없습니다. 이름이 길면 사람들이 후크를 채택하거나 관례를 따르지 못하게 할 것입니다.

우선, 구성 요소의 FirstLetter를 대문자로 입력해야합니다.이 경우 앱 은 App 이고 사람 은 Person 이어야합니다. .

문제를 찾기 위해 코드를 복사하려고했습니다. 앱 구성 요소 를 호출하는 방법을 공유하지 않았으므로 문제가 발생하는 한 가지 방법 만 볼 수 있습니다.

이것은 CodeSandbox : Invalid hook call 의 링크입니다 .

왜? 아래 코드 때문에 잘못되었습니다.

ReactDOM.render(App(), rootElement);

다음과 같아야합니다.

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

자세한 정보는 Rule of Hooks-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 오류를 방지하기 위해 항상 구성 요소 이름의 첫 글자를 대문자로 유지하십시오.

귀하의 경우 에는 React Hook 오류를 피하기 위해 위에서 말했듯 app이으로 변경 해야하는 구성 요소의 이름을 지정했습니다 App.

        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({....

이는 React Hooks에 대한 ESLint 규칙 때문입니다. 여기에서 규칙 링크를 찾으십시오.

React Hooks에 대한 ESLint 규칙

현재 규칙은 라인 번호에 설명되어 있습니다. 44.

화살표 기능을 사용하여 기능적 구성 요소를 생성하지 마십시오.

아래 예 중 하나를 수행하십시오.

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