React Hook“ useState” เรียกว่าในฟังก์ชัน“ app” ซึ่งไม่ใช่ส่วนประกอบของฟังก์ชัน React หรือฟังก์ชัน React Hook ที่กำหนดเอง

ฉันกำลังพยายามใช้ react hooks สำหรับปัญหาง่ายๆ

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 ที่กำหนดเอง react-hooks / rules-of-hooks

บรรทัดที่ 39:
'state' ไม่ได้กำหนดไว้ว่า
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; 

พยายามใช้ตัวพิมพ์ใหญ่ "app" เช่น

const App = props => {...}

export default App;

ในการตอบสนอง, useส่วนประกอบต้องเป็นตัวพิมพ์ใหญ่และตะขอที่กำหนดเองต้องเริ่มต้นด้วย

ฉันรู้สึกเหมือนเรากำลังเรียนหลักสูตรเดียวกันใน Udemy

ถ้าเป็นเช่นนั้นให้ใช้ประโยชน์จากไฟล์

const app

ถึง

const App

ทำเช่นเดียวกับ

export default app

ถึง

export default App

มันทำงานได้ดีสำหรับฉัน

เท่าที่ฉันรู้ว่ามีลินเตอร์รวมอยู่ในแพ็คเกจนี้ และต้องให้คุณ componend ควรเริ่มจากตัวอักษร Capital โปรดตรวจสอบ

อย่างไรก็ตามสำหรับฉันมันเศร้า

ใช้อักษรตัวแรกในชื่อฟังก์ชัน

function App(){}

ใช้ const App แทน const app

เพียงพยายามใช้ชื่อแอปของคุณเป็นตัวพิมพ์ใหญ่

const App = props => {...}

export default App;

คุณได้รับข้อผิดพลาดนี้: "React Hook" useState "ถูกเรียกในฟังก์ชัน" App "ซึ่งไม่ใช่ส่วนประกอบของฟังก์ชัน React หรือฟังก์ชัน React Hook ที่กำหนดเอง"

วิธีแก้ปัญหา: โดยพื้นฐานแล้วคุณต้องใช้ประโยชน์จากฟังก์ชัน

ตัวอย่างเช่น:

const Helper =()=>{}

function Helper2(){}

อักขระตัวแรกของฟังก์ชันของคุณควรเป็นตัวพิมพ์ใหญ่

ฉันมีปัญหาเดียวกัน ปรากฎว่าการใช้ตัวพิมพ์ใหญ่ "A" ใน "App" เป็นปัญหา นอกจากนี้หากคุณส่งออก: export default App;ตรวจสอบให้แน่ใจว่าคุณส่งออก "แอป" ชื่อเดียวกันด้วย

ส่วนประกอบควรขึ้นต้นด้วยตัวพิมพ์ใหญ่ อย่าลืมเปลี่ยนตัวอักษรตัวแรกในบรรทัดเพื่อส่งออก!

คุณมีสิทธิ์นำเข้าหรือไม่?

import React, { useState } from 'react';

ชื่อส่วนประกอบของปฏิกิริยาควรเป็นตัวพิมพ์ใหญ่และฟังก์ชัน hooks ที่กำหนดเองควรเริ่มต้นด้วยคำสำคัญuseเพื่อระบุว่าเป็นฟังก์ชัน react hook

ดังนั้นใช้ประโยชน์จากส่วนประกอบแอพของคุณเป็นแอพ

ฉันมีปัญหาเดียวกัน แต่ไม่ใช่กับแอพ ฉันมีคลาสที่กำหนดเอง แต่ใช้อักษรตัวพิมพ์เล็กเพื่อเริ่มต้นชื่อฟังก์ชันและยังได้รับข้อผิดพลาด

เปลี่ยนอักษรตัวแรกของชื่อฟังก์ชันและบรรทัดการส่งออกเป็น CamelCase และข้อผิดพลาดหายไป

ในกรณีของฉันผลลัพธ์สุดท้ายเป็นดังนี้:

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

สิ่งนี้ช่วยแก้ปัญหาของฉันได้

วิธีแก้ง่ายๆคือ "app" ให้ถูกต้องและเขียน "App" ด้วยอักขระตัวแรกเป็นตัวพิมพ์ใหญ่

ใช้ประโยชน์จากแอพเป็นตัวพิมพ์ใหญ่กับแอพก็จะใช้งานได้

ใน JSX ชื่อแท็กตัวพิมพ์เล็กถือเป็นส่วนประกอบเนทีฟของ html ในการตอบสนองรับรู้ฟังก์ชันเป็นส่วนประกอบของปฏิกิริยาจำเป็นต้องใช้ชื่อเป็นตัวพิมพ์ใหญ่

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;

วิธีแก้ปัญหาตามที่ยูกิชี้ไว้แล้วคือการใช้ชื่อส่วนประกอบเป็นตัวพิมพ์ใหญ่ สิ่งสำคัญคือต้องทราบว่าไม่เพียง แต่องค์ประกอบของแอป "ค่าเริ่มต้น" จะต้องเป็นตัวพิมพ์ใหญ่ แต่ส่วนประกอบทั้งหมด:

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

export default Person;

นี่เป็นเพราะแพ็คเกจ eslint-plugin-react-hooks โดยเฉพาะฟังก์ชัน isComponentName ()ภายในสคริปต์ RulesOfHooks.js

คำอธิบายอย่างเป็นทางการจาก Hooks FAQs :

เรามีปลั๊กอิน ESLint ที่บังคับใช้กฎของ Hooks เพื่อหลีกเลี่ยงข้อบกพร่อง สมมติว่าฟังก์ชันใด ๆ ที่ขึ้นต้นด้วย "ใช้" และอักษรตัวใหญ่ต่อจากนั้นคือ Hook เราตระหนักดีว่าฮิวริสติกนี้ไม่สมบูรณ์แบบและอาจมีผลบวกที่ผิดพลาด แต่หากไม่มีการประชุมที่ครอบคลุมทั้งระบบนิเวศก็ไม่มีทางที่จะทำให้ Hooks ทำงานได้ดี - และชื่อที่ยาวขึ้นจะกีดกันผู้คนจากการใช้ Hooks หรือปฏิบัติตามแบบแผน

แรกของทั้งหมดที่คุณจะต้องเป็นตัวพิมพ์ใหญ่ FirstLetter ส่วนของคุณในกรณีของคุณapp ที่ควรจะเป็นAppและบุคคลที่ควรจะเป็นบุคคล

ฉันพยายามคัดลอกรหัสของคุณโดยหวังว่าจะพบปัญหา เนื่องจากคุณไม่ได้แชร์วิธีที่คุณเรียกส่วนประกอบแอปฉันจึงเห็นเพียง 1 วิธีที่จะทำให้เกิดปัญหานี้

นี้คือการเชื่อมโยงใน CodeSandbox: โทรเบ็ดไม่ถูกต้อง

ทำไม? เนื่องจากรหัสด้านล่างซึ่งผิด:

ReactDOM.render(App(), rootElement);

ควรจะเป็น:

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

สำหรับข้อมูลเพิ่มเติมคุณควรอ่านRule of Hooks - React

หวังว่านี่จะช่วยได้!

ใช้อักษรตัวใหญ่สำหรับการกำหนดชื่อส่วนประกอบที่ใช้งานได้ / ส่วนประกอบที่กำหนดเองของ React hooks "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 เหล่านี้

ในกรณีของคุณคุณได้ตั้งชื่อส่วนประกอบappซึ่งควรเปลี่ยนAppเป็นดังที่ฉันได้กล่าวไว้ข้างต้นเพื่อหลีกเลี่ยงข้อผิดพลาด 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} />
    </>
    );
}

ในการทำงานของแอปที่คุณได้สะกดไม่ถูกต้องคำว่าsetpersonSateหายไปตัวอักษรดังนั้นมันควรจะเป็นtsetpersonState

ข้อผิดพลาด :

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

วิธีแก้ไข :

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

นี่เป็นเพราะกฎ ESLint สำหรับ React Hooks ค้นหาลิงค์ของกฎที่นี่:

กฎ ESLint สำหรับ React Hooks

ณ ตอนนี้กฎได้อธิบายไว้ในบรรทัดที่ 44

ส่วนประกอบของปฏิกิริยา (ทั้งฟังก์ชันและคลาส) ต้องขึ้นต้นด้วยอักษรตัวใหญ่ ชอบ

const App=(props)=><div>Hey</div>

class App extends React.Component{
   render(){
     return <div>Hey</div>
   }
}

React ระบุส่วนประกอบที่ผู้ใช้กำหนดโดยทำตามความหมายนี้ JSX ของ React จะเปลี่ยนไปเป็นฟังก์ชัน React.createElement ซึ่งส่งคืนการแสดงวัตถุของโหนด dom คุณสมบัติ type ของอ็อบเจ็กต์นี้บอกว่าเป็นคอมโพเนนต์ที่ผู้ใช้กำหนดเองหรือองค์ประกอบ dom เช่น div ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องปฏิบัติตามความหมายนี้

เนื่องจาก hook useState สามารถใช้ได้เฉพาะในส่วนประกอบที่ใช้งานได้ (หรือ hook ที่กำหนดเอง) นี่คือสาเหตุที่คุณได้รับข้อผิดพลาดเนื่องจาก react ไม่สามารถระบุได้ว่าเป็นส่วนประกอบที่ผู้ใช้กำหนดเองในตอนแรก

useState ยังสามารถใช้ภายใน hooks ที่กำหนดเองซึ่งใช้สำหรับการนำกลับมาใช้ใหม่และนามธรรมของตรรกะ ตามกฎของตะขอชื่อของตะขอที่กำหนดเองจะต้องขึ้นต้นด้วยคำนำหน้า "ใช้" และต้องอยู่ใน camelCase

อย่าใช้ฟังก์ชันลูกศรเพื่อสร้างส่วนประกอบที่ใช้งานได้

ทำตามหนึ่งในตัวอย่างด้านล่าง:

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