React Hook, useState, được gọi trong chức năng, ứng dụng này không phải là thành phần chức năng React hay chức năng React Hook tùy chỉnh

Tôi đang cố gắng sử dụng móc phản ứng cho một vấn đề đơn giản

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

với các phụ thuộc sau.

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

nhưng tôi vẫn nhận được lỗi sau:

./src/App.js

Dòng 7:
Hook React "useState" được gọi trong hàm "app" không phải là thành phần chức năng React hoặc chức năng React Hook tùy chỉnh Reac-hook / rule-of-hook

Dòng 39:
'state' không được định nghĩa
no-undef

Tìm kiếm các từ khóa để tìm hiểu thêm về từng lỗi.

Mã thành phần dưới đây:

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;

Thành phần người

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; 

Cố gắng viết hoa 'ứng dụng' như

const App = props => {...}

export default App;

Trong React, các thành phần cần được viết hoa và các hook tùy chỉnh cần bắt đầu với use.

Tôi cảm thấy như chúng tôi đang làm cùng một khóa học ở Udemy.

Nếu vậy, chỉ cần viết hoa

const app

Đến

const App

Làm cũng như cho

export default app

Đến

export default App

Nó hoạt động tốt cho tôi.

Theo như tôi biết thì một kẻ nói dối được bao gồm trong gói này. Và nó đòi hỏi bạn phải hoàn thành từ nhân vật Capital. Xin vui lòng kiểm tra xem nó.

Tuy nhiên, đối với tôi, điều đó thật đáng buồn.

sử dụng chữ cái đầu tiên trong tên hàm. ví dụ:-

funciton App(){}     

Sử dụng ứng dụng const thay vì ứng dụng const

Chỉ cần cố gắng viết hoa tên ứng dụng của bạn

const App = props => {...}

export default App;

Bạn đang gặp phải lỗi này: "React Hook" useState "được gọi trong chức năng" Ứng dụng "không phải là thành phần chức năng React hoặc chức năng React Hook tùy chỉnh"

Giải pháp: Về cơ bản bạn cần phải viết hoa chức năng.

Ví dụ:

const Helper =()=>{}

function Helper2(){}

ký tự đầu tiên của chức năng của bạn phải là một chữ hoa

Tôi gặp vấn đề tương tự. hóa ra việc viết hoa chữ "A" trong "Ứng dụng" là vấn đề. Ngoài ra, nếu bạn xuất: export default App;đảm bảo bạn cũng xuất cùng tên "Ứng dụng".

Các thành phần nên bắt đầu bằng chữ in hoa. Cũng nhớ thay đổi chữ cái đầu tiên trong dòng để xuất!

Bạn có nhập đúng không?

import React, { useState } from 'react';

Tên thành phần phản ứng nên được viết hoa và các chức năng móc tùy chỉnh nên bắt đầu bằng việc sử dụng từ khóa để xác định là hàm hook phản ứng.

Vì vậy, hãy viết hoa các thành phần ứng dụng của bạn vào Ứng dụng

Tôi đã có cùng một vấn đề, nhưng không phải với Ứng dụng. Tôi đã có một lớp tùy chỉnh nhưng sử dụng một chữ cái viết thường để bắt đầu tên hàm và cũng nhận được lỗi.

Đã thay đổi chữ cái đầu tiên của tên hàm và dòng xuất thành CamelCase và lỗi đã biến mất.

trong trường hợp của tôi, kết quả cuối cùng là như sau:

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

Điều này đã giải quyết vấn đề của tôi.

Giải pháp rất đơn giản, chính xác là "ứng dụng" và viết "Ứng dụng" với ký tự đầu tiên viết hoa.

Viết hoa ứng dụng vào App chắc chắn sẽ hoạt động.

Trong JSX, tên thẻ chữ thường được coi là thành phần gốc html. Để phản ứng nhận ra chức năng là thành phần React, cần viết hoa tên.

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

Thay thế cái này

export default app;

Với cái này

export default App;

Tạo chức năng tên vốn. Điều này làm việc cho tôi.

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"

Đối với các lỗi sau, viết hoa chữ cái đầu tiên của thành phần, và cũng xuất.

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

Giải pháp, như Yuki đã chỉ ra, là viết hoa tên thành phần. Điều quan trọng cần lưu ý là không chỉ thành phần Ứng dụng "mặc định" cần được viết hoa, mà tất cả các thành phần:

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

export default Person;

Điều này là do gói eslint-plugin-Reac-hook, cụ thể là hàm isComponentName () bên trong tập lệnh RulesOfHooks.js.

Giải thích chính thức từ Câu hỏi thường gặp về Móc :

Chúng tôi cung cấp một plugin ESLint thực thi các quy tắc của Hook để tránh lỗi. Nó giả định rằng bất kỳ chức năng nào bắt đầu với việc sử dụng trực tuyến và sử dụng chữ cái viết hoa ngay sau khi nó là Hook. Chúng tôi nhận ra heuristic này không hoàn hảo và có thể có một số mặt tích cực sai, nhưng không có quy ước toàn hệ sinh thái, sẽ không có cách nào để Hook hoạt động tốt - và những cái tên dài hơn sẽ khiến mọi người không chấp nhận Hook hoặc tuân theo quy ước.

Trước hết, bạn cần viết hoa FirstLetter của các thành phần, trong trường hợp ứng dụng của bạn phải là Ứng dụng và người phải là Người .

Tôi đã cố gắng sao chép mã của bạn với hy vọng tìm ra vấn đề. Vì bạn không chia sẻ cách bạn gọi Ứng dụng thành phần , tôi chỉ có thể thấy 1 cách dẫn đến sự cố này.

Đây là liên kết trong CodeSandbox: Cuộc gọi hook không hợp lệ .

Tại sao? Bởi vì mã dưới đây là sai:

ReactDOM.render(App(), rootElement);

Đáng lẽ ra phải là:

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

Để biết thêm thông tin, bạn nên đọc Quy tắc móc - Phản ứng

Hi vọng điêu nay co ich!

Sử dụng chữ in hoa để xác định tên thành phần chức năng / Phản ứng móc các thành phần tùy chỉnh. "const 'ứng dụng" nên là "Ứng dụng".

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]

Bước 1: Thay đổi tên tệp src / App.js thành src / app.js

Bước 2: Nhấp vào "Có" cho "Cập nhật nhập cho app.js".

Bước 3: Khởi động lại máy chủ một lần nữa.

Bất cứ khi nào làm việc với thành phần chức năng React, luôn luôn giữ chữ cái đầu tiên của tên của thành phần đó trong Uppercase để tránh các lỗi React Hook này.

Trong trường hợp của bạn, bạn đã đặt tên thành phần app, nên được đổi thành App, như tôi đã nói ở trên, để tránh lỗi 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} />
    </>
    );
}

Trong chức năng ứng dụng, bạn đã viết sai chính tả setpersonSate, thiếu chữ cái t, do đó nó phải như vậy setpersonState.

Lỗi :

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

Giải pháp :

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

Điều này là do quy tắc ESLint cho React Hook. Tìm liên kết của quy tắc ở đây:

Quy tắc ESLint cho móc phản ứng

Đến bây giờ, quy tắc được mô tả trong dòng không. 44.

Không sử dụng chức năng mũi tên để tạo các thành phần chức năng.

Làm như một trong những ví dụ dưới đây:

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

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

Hoặc là

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

Nếu bạn gặp vấn đề với "ref"(có thể là các vòng lặp), giải pháp là sử dụng 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 })}
    />
  );
});