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

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; 

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.

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.

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.

Gunakan huruf kapital pertama dalam nama fungsi.

function App(){}

Gunakan Aplikasi const daripada aplikasi const

Coba gunakan huruf besar untuk nama Aplikasi Anda

const App = props => {...}

export default App;

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(){}

karakter pertama dari fungsi Anda harus huruf besar

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.

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

Apakah Anda memiliki impor yang benar?

import React, { useState } from 'react';

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

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.

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

Memanfaatkan aplikasi ke Aplikasi pasti akan berhasil.

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

Ganti ini

export default app;

dengan ini

export default App;

Jadikan modal nama fungsi. Ini bekerja untuk saya.

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"

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

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

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.

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!

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]

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.

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.

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

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

Ini karena aturan ESLint untuk React Hooks. Temukan tautan aturan di sini:

Aturan ESLint untuk React Hooks

Sampai sekarang, aturan tersebut dijelaskan pada baris no. 44.

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