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関数react-hooks / rules-of-hooksでもない関数 "app"で呼び出されます

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ます。

Udemyでも同じコースをやっているような気がします。

もしそうなら、ちょうど大文字にします

const app

に

const App

同様に行う

export default app

に

export default App

それは私にはうまくいきます。

私の知る限り、このパッケージにはリンターが含まれています。そして、それはあなたが構成要素を大文字から始める必要があることを要求します。これをチェックしてください。

でも私は悲しいです。

関数名には最初の大文字を使用してください。

function App(){}

const appの代わりにconst Appを使用する

アプリ名を大文字にしてみてください

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キーワードで開始して、reactフック関数として識別する必要があります。

したがって、アプリのコンポーネントを大文字にしてAppにします

私は同じ問題を抱えていましたが、アプリではそうではありませんでした。カスタムクラスがありましたが、小文字を使用して関数名を開始しましたが、エラーも受け取りました。

関数名の最初の文字とエクスポート行をキャメルケースに変更し、エラーがなくなりました。

私の場合、最終結果は次のようなものでした：

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;

結城がすでに指摘したように、解決策はコンポーネント名を大文字にすることです。「デフォルト」のAppコンポーネントだけでなく、すべてのコンポーネントを大文字にする必要があることに注意してください。

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

export default Person;

これは、eslint-plugin-react-hooksパッケージ、特にRulesOfHooks.jsスクリプト内のisComponentName （）関数が原因です。

Hooks FAQsからの公式説明：

バグを回避するためにフックのルールを適用するESLintプラグインを提供します。「use」で始まるすべての関数と、その直後の大文字がフックであると想定しています。このヒューリスティックは完全ではなく、いくつかの誤検知がある可能性がありますが、エコシステム全体にわたる規則がないと、フックを適切に機能させる方法がありません。名前が長いと、フックの採用や規則の遵守が妨げられます。

まず、コンポーネントのFirstLetterを大文字にする必要があります。この場合、アプリはAppで、人物はPersonである必要があります。

問題を見つけることを期待してあなたのコードをコピーしようとしました。アプリコンポーネントの呼び出し方法を共有しなかったので、これを問題に導く方法は1つしかありません。

これは、CodeSandbox：Invalid hook callのリンクです。

どうして？以下のコードが間違っているため：

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]

ステップ-1：ファイル名src / App.jsをsrc / app.jsに変更します

ステップ-2：「app.jsのインポートの更新」で「はい」をクリックします。

ステップ-3：サーバーを再起動します。

React Hooksエラーを回避するために、React機能コンポーネントを使用するときは常に、コンポーネント名の最初の文字を大文字のままにしてください。

あなたの場合、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 })}
    />
  );
});