web-dev-qa-db-ja.com

Reactフック "useState"が関数 "app"で呼び出されていますが、これはReact関数コンポーネントでもカスタムでもありませんReactフック機能

簡単な問題のために反応フックを使用しようとしています

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"は関数= "app"で呼び出されていますが、これはReact関数コンポーネントでもカスタムでもありませんReact Hook function react-フック/フックのルール

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 (
        <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;
reactjsreact-hooks
99
Bishnu

「アプリ」のように大文字にしよう

const App = props => {...}

export default App;
236
YUKI

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

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

const app

に

const App

同様に行う

export default app

に

export default App

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

33
Tuan Phan

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

でも私は悲しいです。

24
alerya

関数名には最初の大文字を使用してください。例：-関数App {}

17
Kelum Sampath Edirisinghe

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

const App = props => {...}

export default App;
12
pratik garg

このエラーが発生しています：「React Hook "useState"が関数= "App"で呼び出されていますが、これはReact関数コンポーネントでもカスタムでもありませんReactフック関数」

解決策：基本的に関数を大文字にする必要があります。

例えば：

const Helper =()=>{}

function Helper2(){}
11
ASHISH RANJAN

同じ問題がありました。 「アプリ」で「A」を大文字にすることが問題であることがわかりました。また、エクスポートする場合：export default App;同じ名前の「アプリ」もエクスポートするようにしてください。

10
samson ade

コンポーネントは大文字で始める必要があります。また、エクスポートする行の最初の文字を変更することも忘れないでください！

10
César O. Araújo

関数の最初の文字は大文字にする必要があります

8
rubimbura brian

Reactコンポーネント名は大文字である必要があり、カスタムフック関数はseキーワードで開始して、reactフック関数として識別される必要があります。

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

5
Ali Torki

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

4
Jyothish s nair

適切なインポートがありますか？

import React, { useState } from 'react';
4
Alexandre Mouyen

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

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

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

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

これは私の問題を解決しました。

3
Terence Hinrichsen

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

2
Ho Albert

解決策は簡単です。「app」を修正し、最初の文字を大文字にして「App」と書きます。

2
KleberDigital

アプリを大文字にするとアプリは確実に機能します。

2
Harshit Singhai

まず、コンポーネントのFirstLetterを大文字にする必要があります。この場合、appはAppおよびpersonはPersonである必要があります。

問題を見つけるためにあなたのコードをコピーしようとしました。 Appコンポーネントの呼び出し方法を共有しなかったので、これが問題を引き起こす1つの方法しかわかりません。

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

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

ReactDOM.render(App(), rootElement);

それはあったはずです：

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

詳細については、次をお読みください Rule of Hooks-React

お役に立てれば！

1
Jojo Tutor

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

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

export default Person;

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

公式説明 フックのFAQから ：

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

1
Nicolas Hevia

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

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

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

0
Mohd. Shahnawaz Ali Choudhary

アロー関数を使用して機能コンポーネントを作成しないでください。

以下の例のいずれかを実行します。

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