React Hook "useState" disebut dalam fungsi "app" yang bukan merupakan komponen fungsi Bereaksi atau fungsi React Hook kustom


148

Saya mencoba menggunakan kait reaksi untuk masalah sederhana

const [personState,setPersonState] = useState({ DefinedObject });

dengan dependensi berikut.

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
}

tapi saya masih mendapatkan kesalahan berikut:

./src/App.js

Baris 7:
React Hook "useState" disebut dalam fungsi "app" yang bukan komponen fungsi Bereaksi atau fungsi React Hook kustom bereaksi-kait / aturan-kait

Baris 39:
'status' tidak didefinisikan
tanpa-undef

Cari kata kunci untuk mempelajari lebih lanjut tentang setiap kesalahan.

Kode komponen di bawah ini:

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;

Komponen orang

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; 

1
Bisakah Anda membagikan kode komponen Anda?
Sachin

impor Bereaksi, {useState} dari 'react'; import './App.css'; mengimpor Orang dari './Person/Person'; app const = props => {const [personState, setPersonSate] = useState ({person: [{name: 'bishnu', usia: '32 '}, {nama:' rasmi ', usia: '27'}, {name : 'fretbox', usia: '4'}],}); return (<div className = "App"> <h2> Ini bereaksi </h2> <Nama orang = {personState.person [1] .name} age = "27"> </Person> <Nama orang = {personState .person [2] .name} age = "4"> </Person> </div>); }; ekspor aplikasi default;
Bishnu

Komponen Orang: - impor Bereaksi dari 'react'; const person = (props) => {return (<div> <h3> saya {props.name} </h3> <p> saya {props.age} tahun </p> <p> {props. children} </p> </div>)} ekspor orang default;
Bishnu

5
sangat buruk untuk membaca kode bersama seperti itu, menghormati orang lain
AlexNikonov

5
Saya memiliki masalah yang sama juga dari kursus Maximilian Bereaksi.
GDG612

Jawaban:


337

Cobalah untuk menggunakan huruf kapital 'app' seperti

const App = props => {...}

export default App;

Di Bereaksi, komponen harus dikapitalisasi, dan pengait kustom harus dimulai dengan use.


26
Ini adalah beberapa kesulitan untuk menemukan bug dalam aplikasi, saya pikir komentar lain harus ditambahkan ke pesan kesalahan untuk menunjukkan kemungkinan ini.
Mark E

22
Alasan untuk makhluk ini bahwa dalam Peraturan Hooks ESLint Plugin , ada cek untuk melihat apakah komponen atau fungsi nama berlaku: Checks if the node is a React component name. React component names must always start with a non-lowercase letter..
HGomez

11
Memanfaatkan A di App berfungsi untuk saya ... tetapi tidak saya berpikir mengapa max tidak mendapatkan kesalahan ini dalam kursus udemy?
Ashish Sharma

8
Pertanyaan yang sama "mengapa max tidak mendapatkan kesalahan? Saya mengubah" app "menjadi" App "dan sekarang berfungsi untuk saya!
Forhad

kamu adalah Tuhan yang diutus. Saya bisa mengalami hari yang sulit sekarang. Diberkatilah
kipruto

51

Saya merasa kami melakukan hal yang sama di Udemy.

Jika demikian, gunakan huruf besar saja

const app

Untuk

const App

Lakukan juga untuk

export default app

Untuk

export default App

Ini bekerja dengan baik untuk saya.


5
Ya saya pikir itu membuat 3 dari kita melakukan kursus yang sama. Mengapa ini case-sensitive?
MeltingDog

2
Ini harus ditandai sebagai jawaban yang benar. Secara default, nama "komponen utama" HARUS dikapitalisasi. Ingat juga untuk mengimpor komponen Anda dengan nama huruf besar. SALAH: import compo dari './Compo'; KANAN: impor Compo dari './Compo'; Sebagai reaksi mengenali tag JSX yang dikapitalisasi sebagai komponen reaksi.
Marcos R

1
mengapa case senstive tho?
kipruto

35

Sejauh yang saya tahu linter dimasukkan ke dalam paket ini. Dan itu mengharuskan kamu untuk komponend harus dimulai dari karakter Capital. Tolong diperiksa.

Namun bagi saya itu menyedihkan.


Terima kasih bekerja seperti pesona @alerya
karthickeyan

Terima kasih telah menghemat waktu saya.
Harsimer

22

Gunakan huruf kapital pertama dalam nama fungsi.

function App(){}

"Pertama-tama, kamu perlu huruf besar FirstLetter dari komponen kamu, dalam aplikasi kasus kamu harus App dan orang harus Person." Seseorang sudah menulisnya ...
Pochmurnik

Ini telah dijawab dan ini harus ditandai sebagai jawabannya. Solusi sederhana dijelaskan dengan benar.
user2112618



12

Anda mendapatkan kesalahan ini: "React Hook" useState "disebut dalam fungsi" App "yang bukan komponen fungsi Bereaksi atau fungsi React Hook kustom"

Solusi: Anda pada dasarnya perlu Memanfaatkan fungsi.

Sebagai contoh:

const Helper =()=>{}

function Helper2(){}



10

Saya memiliki masalah yang sama. ternyata Memanfaatkan huruf "A" di "App" adalah masalahnya. Juga, jika Anda melakukan ekspor: export default App;pastikan Anda juga mengekspor nama "Aplikasi" yang sama.


10

Komponen harus dimulai dengan huruf kapital. Ingat juga untuk mengubah huruf pertama di baris yang akan diekspor!


2
Pertanyaan Anda sepertinya bukan jawaban. Setelah mencapai 50 rep Anda akan dapat mengomentari pertanyaan. Jika jawaban Anda adalah jawaban, coba tingkatkan. Mengapa komponen harus dimulai dengan huruf kapital, misalnya? Juga, jawaban lain sudah mengatakan bahwa, apakah Anda memberikan sesuatu yang baru?
Ender Look


5

Bereaksi nama komponen harus dikapitalisasi dan fungsi kait kustom harus dimulai dengan penggunaan kata kunci untuk mengidentifikasi sebagai fungsi kait reaksi.

Jadi, kapitalisasi komponen aplikasi Anda ke Aplikasi


3

Saya memiliki masalah yang sama, tetapi tidak dengan Aplikasi. Saya memiliki kelas khusus tetapi menggunakan huruf kecil untuk memulai nama fungsi dan juga menerima kesalahan.

Mengubah huruf pertama dari nama fungsi dan baris ekspor ke CamelCase dan kesalahan hilang.

dalam kasus saya hasil akhirnya adalah seperti:

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

ini menyelesaikan masalah saya.


2

Solusinya sederhana, "app" benar dan tulis "App" dengan karakter pertama dalam huruf besar.


Selamat datang di StackOverflow (Upvoted). silakan berikan kode dan jawab pertanyaannya.
Mehdi Yeganeh


2

Di JSX, nama tag huruf kecil dianggap sebagai komponen asli html. Untuk bereaksi mengenali fungsi sebagai komponen Bereaksi, perlu menggunakan huruf besar nama.

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

Ganti ini

export default app;

dengan ini

export default App;


2
React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

Untuk kesalahan berikut, huruf besar komponen seperti huruf pertama, dan juga ekspor.

const App  = props => {
...}
export default App;

1

Solusinya, seperti yang sudah Yuki tunjuk, adalah dengan memanfaatkan nama komponen. Penting untuk dicatat bahwa tidak hanya komponen aplikasi "default" yang perlu dikapitalisasi, tetapi semua komponen:

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

export default Person;

Ini disebabkan oleh paket eslint-plugin-react-hooks, khususnya fungsi isComponentName () di dalam skrip RulesOfHooks.js.

Penjelasan resmi dari Hooks FAQs :

Kami menyediakan plugin ESLint yang memberlakukan aturan Hooks untuk menghindari bug. Diasumsikan bahwa fungsi apa pun yang dimulai dengan "gunakan" dan huruf kapital tepat setelah itu adalah Hook. Kami menyadari heuristik ini tidak sempurna dan mungkin ada beberapa hal positif yang salah, tetapi tanpa konvensi seluruh ekosistem, tidak ada cara untuk membuat Hook bekerja dengan baik - dan nama yang lebih panjang akan membuat orang enggan mengadopsi Hooks atau mengikuti konvensi.


1

Pertama-tama, Anda perlu huruf besar FirstLetter dari komponen Anda, dalam aplikasi kasus Anda harus Aplikasi dan orang harus Orang .

Saya mencoba menyalin kode Anda dengan harapan menemukan masalah. Karena Anda tidak membagikan bagaimana Anda memanggil komponen App , saya hanya dapat melihat 1 cara untuk menghasilkan ini menjadi masalah.

Ini adalah tautan di CodeSandbox: Panggilan kait tidak valid .

Mengapa? Karena kode di bawah ini yang salah:

ReactDOM.render(App(), rootElement);

Seharusnya:

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

Untuk info lebih lanjut, Anda harus membaca Rule of Hooks - React

Semoga ini membantu!


1

Gunakan huruf kapital untuk menentukan nama komponen fungsional / React hooks custom komponen. "const 'app' haruslah 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]


0

Langkah-1: Ubah nama file src / App.js menjadi src / app.js

Langkah-2: Klik "Ya" untuk "Perbarui impor untuk app.js".

Langkah-3: Nyalakan kembali server.


0

Setiap kali bekerja dengan komponen fungsional Bereaksi, selalu simpan huruf pertama dari nama komponen dalam Huruf Besar untuk menghindari kesalahan React Hooks ini.

Dalam kasus Anda, Anda telah memberi nama komponen app, yang harus diubah menjadi App, seperti yang saya katakan di atas, untuk menghindari kesalahan React Hook.


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

0

Dalam fungsi aplikasi Anda salah mengeja kata setpersonSate, melewatkan surat t, jadi seharusnya begitu setpersonState.

Kesalahan :

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

Solusi :

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


-3

Jangan gunakan fungsi panah untuk membuat komponen fungsional.

Lakukan sebagai salah satu contoh di bawah ini:

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

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

Atau

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

Jika Anda memiliki masalah dengan "ref"(mungkin dalam loop), solusinya adalah menggunakan 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 })}
    />
  );
});

Bisakah Anda menjelaskan lebih lanjut, mengapa "Jangan menggunakan fungsi panah untuk membuat komponen fungsional." ? - Terima kasih
Juan

Untuk menghindari masalah dengan useState () dalam beberapa situasi, seperti dalam kasus ini: codesandbox.io/s/usestate-error-f452s
GilCarvalhoDev
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.