প্রতিক্রিয়া হুক "ইউজস্টেট" ফাংশন "অ্যাপ" বলা হয় যা কোনও প্রতিক্রিয়া ফাংশন উপাদান বা কাস্টম প্রতিক্রিয়া হুক ফাংশন নয়

Question

আমি একটি সাধারণ সমস্যার জন্য প্রতিক্রিয়া হুক ব্যবহার করার চেষ্টা করছি

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

নিম্নলিখিত নির্ভরতা সহ।

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

তবে আমি এখনও নিম্নলিখিত ত্রুটি পেয়েছি:

./src/App.js

লাইন::
প্রতিক্রিয়া হুককে "ইউজস্টেট" ফাংশন "অ্যাপ" বলা হয় যা কোনও প্রতিক্রিয়া ফাংশন উপাদান নয় বা কাস্টম রিঅ্যাক্ট হুক ফাংশন রিঅ্যাক্ট হুক / রুলস অফ-হুক নয়

লাইন 39:
'রাষ্ট্র' সংজ্ঞায়িত
নয় no

প্রতিটি ত্রুটি সম্পর্কে আরও জানতে কীওয়ার্ডগুলি অনুসন্ধান করুন।

উপাদান কোডটি নীচে রয়েছে:

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; 

Comments

আপনি কি আপনার উপাদান কোড ভাগ করতে পারেন?

— শচীন 10

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {useState;; আমদানি './app.css'; './Person/Person' থেকে ব্যক্তি আমদানি করুন; কনট অ্যাপ = প্রপস => {কনস্ট [পার্সোনস্টেট, সেটপারসনসেট] = ব্যবহারের স্টেট ({ব্যক্তি: [{নাম: 'বিষ্ণু', বয়স: '32 '}, {নাম:' রাসমি ', বয়স: '27'}, {নাম : 'ফ্রেটবক্স', বয়স: '4'}],}); প্রত্যাবর্তন করুন (<div className = "অ্যাপ"> <h2> এটি প্রতিক্রিয়া </ h2> <ব্যক্তির নাম = {personState.Press [1]। নাম} বয়স = "27"> << ব্যক্তির নাম = {ব্যক্তি স্ট্যাট । پريس [2] .নম} বয়স = "4"> </erson> </div>); export; রফতানি ডিফল্ট অ্যাপ্লিকেশন;

— বিষ্ণু

ব্যক্তি উপাদান: - 'রিঅ্যাক্ট' থেকে আমদানি করুন; কনস্ট ব্যক্তি = (প্রপস) => {রিটার্ন (<ডিভি> <h3> আমি {প্রপস.নেম} </h3> <p> আমি {প্রপস.এইজ} বছর বয়সী </ p> <p>। প্রপস। বাচ্চাদের} </p> </div>)} রফতানি ডিফল্ট ব্যক্তি;

— বিষ্ণু

এটি একটি জাহান্নাম যেমন ভাগ করা কোড পড়তে হয়, অন্যদের সম্মান

— AlexNikonov

আমারও একই সমস্যা ছিল ম্যাক্সিমিলিয়ান রিএ্যাক্ট কোর্স থেকে।

— জিডিজি 612

Answer 1

'অ্যাপ' এর মতো মূলধনের চেষ্টা করুন

const App = props => {...}

export default App;

প্রতিক্রিয়া হিসাবে, উপাদানগুলি মূলধন করা দরকার এবং কাস্টম হুকগুলি শুরু করা দরকার use।

Comments

কোনও অ্যাপটিতে বাগ খুঁজে পাওয়া কিছুটা কঠিন, আমি মনে করি এই সম্ভাব্যতাটি উল্লেখ করার জন্য ত্রুটি বার্তায় আরও একটি মন্তব্য যুক্ত করা উচিত।

— ই

এর কারণ হুকস ইএসলিন্ট প্লাগইন এর বিধিগুলিতে কোনও উপাদান বা ফাংশনের নামটি বৈধ কিনা তা দেখতে একটি চেক আছে Checks if the node is a React component name. React component names must always start with a non-lowercase letter.।

— এইচগোমেজ

অ্যাপ্লিকেশন এ এ ক্যাপিটালাইজিং আমার জন্য কাজ করে ... তবে আমি ভাবছি না কেন উডেমি কোর্সে সর্বোচ্চটি এই ত্রুটিটি পেল না?

— আশীষ শর্মা

একই প্রশ্ন "কেন সর্বোচ্চ কোনও ত্রুটি পেলেন না? আমি" অ্যাপ "কে" অ্যাপ "এ পরিবর্তন করেছি এবং এখন এটি আমার পক্ষে কাজ করেছে!

— মোঃ ফরহাদ সরকার

আপনি Godশ্বর প্রেরিত হয়। আমি এখনই একটি কঠিন দিন হতে পারে। ধন্য হও

— কিপ্রুটো

Answer 2

আমার মনে হচ্ছে আমরা উডেমিতে একই কোর্সটি করছি।

যদি তাই হয় তবে কেবলমাত্র মূলধনটি দিন

const app

প্রতি

const App

পাশাপাশি করুন

export default app

প্রতি

export default App

এটি আমর জন্য ভাল কাজ করছে.

Comments

হ্যাঁ আমার মনে হয় এটি আমাদের 3 জনকে একই কোর্স করে। কেন এটি মামলা সংবেদনশীল?

— মেল্টিংডগ

এটি সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত। ডিফল্টরূপে, "মূল উপাদান" নামটি মূলধন করা উচিত। আপনার উপাদানগুলি বড় বড় নাম দিয়ে আমদানি করতে ভুলবেন না। ভুল: '। / কমপো' থেকে কম্পো আমদানি করুন; অধিকার: '। / কমপো' থেকে কম্পো আমদানি করুন; প্রতিক্রিয়া হিসাবে বড় আকারের জেএসএক্স ট্যাগকে প্রতিক্রিয়া উপাদান হিসাবে স্বীকৃতি দেয়।

— মার্কোস আর

কেন এটা সংবেদনশীল হয়?

— কিপ্রুটো

Answer 3

আমি যতদূর জানি এই প্যাকেজটিতে একটি লিন্টার অন্তর্ভুক্ত রয়েছে। এবং এটির জন্য আপনার প্রয়োজন মূলধনির অক্ষর থেকে শুরু করে one দয়া করে এটি পরীক্ষা করুন।

তবে আমার পক্ষে এটি দুঃখজনক।

Comments

ধন্যবাদ কবজ @alerya মতো কাজ

— karthickeyan

আমার সময় বাঁচানোর জন্য ধন্যবাদ।

— হার্সিমার

Answer 4

ফাংশনের নামে প্রথম অক্ষরের মূলধন ব্যবহার করুন।

function App(){}

Comments

"প্রথমত, আপনাকে আপনার উপাদানগুলির ফার্স্ট লেটারটি বড় হাতের করা দরকার, আপনার ক্ষেত্রে অ্যাপ্লিকেশনটি অ্যাপ হতে হবে এবং ব্যক্তি ব্যক্তি হওয়া উচিত" " কেউ ইতিমধ্যে এটি লিখেছেন ...

— পোচমুরনিক

এটির উত্তর দেওয়া হয়েছে এবং এটি উত্তর হিসাবে চিহ্নিত করা উচিত। সহজ সমাধান সঠিক ব্যাখ্যা।

— ব্যবহারকারী 2112618

Answer 5

কনস্ট অ্যাপের পরিবর্তে কনস্ট অ্যাপ ব্যবহার করুন

Answer 6

আপনার অ্যাপের নামটি মূলধন করার চেষ্টা করুন

const App = props => {...}

export default App;

Comments

আপনি কি নথির শিরোনাম বলতে চান?

— gakeko betsi

এটির কাজ, ধন্যবাদ

— দেব রুপিন্দর

Answer 7

আপনি এই ত্রুটিটি পেয়ে যাচ্ছেন: "প্রতিক্রিয়া হুক" ব্যবহারের স্টেট "ফাংশন" অ্যাপ "তে ডাকা হয় যা কোনও প্রতিক্রিয়া ফাংশন উপাদান বা কাস্টম প্রতিক্রিয়া হুক ফাংশন নয়"

সমাধান: আপনার মূলত ফাংশনটি মূলধন করতে হবে।

উদাহরণ স্বরূপ:

const Helper =()=>{}

function Helper2(){}

Answer 8

আপনার ফাংশনের প্রথম চরিত্রটি একটি বড় হাতের অক্ষর হওয়া উচিত

Comments

বাহ, আমি সবসময় এটি ভুলে যাই ধন্যবাদ :)

— Dzenis এইচ।

Answer 9

আমারো একই ইস্যু ছিল. দেখা যাচ্ছে যে "অ্যাপ" এর "এ" মূলধনাইয়ের বিষয়টি ছিল। এছাড়াও, আপনি যদি রফতানি করেন: export default App;আপনিও একই নাম "অ্যাপ" রফতানি করে তা নিশ্চিত করুন।

Answer 10

মূল উপাদানগুলি দিয়ে উপাদানগুলি শুরু করা উচিত। রফতানি করতে লাইনে প্রথম অক্ষরটি পরিবর্তন করতে ভুলবেন না!

Comments

আপনার প্রশ্নটি উত্তর বলে মনে হচ্ছে না। 50 প্রতিনিধি পৌঁছানোর পরে আপনি প্রশ্নগুলিতে মন্তব্য করতে সক্ষম হবেন। যদি আপনি উত্তরটি উত্তর হন তবে এটি উন্নত করার চেষ্টা করুন। উদাহরণস্বরূপ, কেন উপাদানগুলি মূল অক্ষর দিয়ে শুরু করা উচিত? এছাড়াও, অন্যান্য উত্তরগুলি ইতিমধ্যে বলেছে যে আপনি নতুন কিছু দিচ্ছেন?

— এন্ডার

Answer 11

আপনার কি সঠিক আমদানি আছে?

import React, { useState } from 'react';

Answer 12

প্রতিক্রিয়াযুক্ত উপাদানগুলির নামগুলি মূলধন করা উচিত এবং কাস্টম হুক ক্রিয়াকলাপগুলি প্রতিক্রিয়া হুক ফাংশন হিসাবে চিহ্নিত করার জন্য ব্যবহার কীওয়ার্ড দিয়ে শুরু করা উচিত ।

সুতরাং, আপনার পুঁজিতে অ্যাপ্লিকেশন থেকে উপাদান অ্যাপ

Answer 13

আমার একই সমস্যা ছিল, তবে অ্যাপটির সাথে নয়। আমার একটি কাস্টম ক্লাস ছিল তবে ফাংশনটির নাম শুরু করতে ছোট হাতের অক্ষর ব্যবহার করেছি এবং ত্রুটিটি পেয়েছি।

ফাংশনটির নামের প্রথম অক্ষর এবং ক্যামেলকেসে এক্সপোর্ট লাইন পরিবর্তন হয়েছে এবং ত্রুটি চলে গেছে।

আমার ক্ষেত্রে শেষ ফলাফলটি এমন ছিল:

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

এটি আমার সমস্যার সমাধান করেছে।

Answer 14

সমাধানটি সহজ, সঠিক "অ্যাপ" এবং বড় হাতের অক্ষরে প্রথম অক্ষর সহ "অ্যাপ" লিখুন।

Comments

স্ট্যাকওভারফ্লো (আপভোটেড) এ আপনাকে স্বাগতম। দয়া করে কিছু কোড দিন এবং প্রশ্নের উত্তর দিন।

— মেহেদি ইগানেহে

Answer 15

অ্যাপ্লিকেশন অ্যাপ্লিকেশন ক্যাপিটালাইজ অবশ্যই কাজ করবে।

Answer 16

জেএসএক্সে, লোয়ার-কেস ট্যাগের নামটি এইচটিএমএল নেটিভ উপাদান হিসাবে বিবেচনা করা হয়। ক্রিয়াকে প্রতিক্রিয়া উপাদান হিসাবে স্বীকৃতি দেওয়ার জন্য, নামটি মূলধন করা দরকার।

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

Answer 17

এটি প্রতিস্থাপন করুন

export default app;

এর সাথে

export default App;

Answer 18

ফাংশন নাম মূলধন করুন। এটি আমার পক্ষে কাজ করে।

export default function App() { }

Answer 19

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;

Answer 20

ইতিমধ্যে ইউকির নির্দেশিত সমাধানটি হ'ল উপাদানটির নামটি মূলধন করা। এটি লক্ষণীয় গুরুত্বপূর্ণ যে কেবলমাত্র "ডিফল্ট" অ্যাপ উপাদানই মূলধন করা দরকার না, সমস্ত উপাদান:

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

export default Person;

এটি এসলিন্ট-প্লাগ-ইন-রিঅ্যাক্ট-হুক্স প্যাকেজটির কারণে, বিশেষত RuleOfHooks.js স্ক্রিপ্টের অভ্যন্তরে CompompName () ফাংশন রয়েছে।

হুকস এফএকিউ থেকে সরকারী ব্যাখ্যা :

আমরা একটি ESLint প্লাগইন সরবরাহ করি যা বাগগুলি এড়াতে হুকসের বিধি প্রয়োগ করে। এটি ধরে নেওয়া হয় যে "ব্যবহার" দিয়ে শুরু হওয়া কোনও ক্রিয়াকলাপ এবং হুকের ঠিক পরে একটি মূল অক্ষর। আমরা স্বীকৃতি দিয়েছি যে এই তাত্ত্বিকটি নিখুঁত নয় এবং কিছু ভ্রান্ত ইতিবাচকতা থাকতে পারে তবে বাস্তুতন্ত্র-বিস্তৃত কনভেনশন ছাড়া হুকসকে ভালভাবে চালিত করার কোনও উপায় নেই - এবং দীর্ঘ নামগুলি হুককে গ্রহণ বা সম্মেলনটি অনুসরণ করা থেকে মানুষকে নিরুৎসাহিত করবে।

Answer 21

প্রথম সব, আপনি আপনার উপাদান FirstLetter বড় হাতের অক্ষরে, আপনার ক্ষেত্রে প্রয়োজন অ্যাপ্লিকেশন হওয়া উচিত অ্যাপ এবং ব্যক্তি হওয়া উচিত ব্যক্তি ।

সমস্যাটি খুঁজে পাওয়ার আশায় আমি আপনার কোডটি অনুলিপি করার চেষ্টা করেছি। যেহেতু আপনি কীভাবে অ্যাপ উপাদানটি কল করেন তা আপনি ভাগ করেননি , সুতরাং আমি ইস্যুতে এটির ফলাফল পাওয়ার 1 টি উপায় দেখতে পাচ্ছি।

কোডস্যান্ডবক্সে এটি লিঙ্ক: অবৈধ হুক কল ।

কেন? নীচের কোডটির কারণে যা ভুল:

ReactDOM.render(App(), rootElement);

এটি হওয়া উচিত ছিল:

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

আরও তথ্যের জন্য, আপনার হুকস রুল পড়তে হবে - প্রতিক্রিয়া

আশাকরি এটা সাহায্য করবে!

Answer 22

ক্রিয়ামূলক উপাদান নাম / প্রতিক্রিয়া হুক কাস্টম উপাদানগুলির সংজ্ঞা দেওয়ার জন্য মূলধনপত্র ব্যবহার করুন। "কনস্ট 'অ্যাপ্লিকেশনটি কনস্ট' অ্যাপ 'হওয়া উচিত।

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

[রিট্যাক্ট হুকস] [ইউজ স্টেট] [রিঅ্যাক্টজেস]

Answer 23

পদক্ষেপ -১: ফাইলের নাম src / app.js কে src / app.js এ পরিবর্তন করুন

পদক্ষেপ -২: "অ্যাপ্লিকেশনগুলির জন্য আমদানি আপডেট করুন" এর জন্য "হ্যাঁ" এ ক্লিক করুন।

পদক্ষেপ -3: আবার সার্ভার পুনরায় চালু করুন।

Answer 24

যখনই কোনও প্রতিক্রিয়াশীল ফাংশনাল উপাদানটির সাথে কাজ করা হয়, এই প্রতিক্রিয়া হুকগুলির ত্রুটি এড়াতে সর্বদা উপাদানটির নামের প্রথম অক্ষর বড় হাতের অক্ষরে রাখুন।

আপনার ক্ষেত্রে, আপনি প্রতিক্রিয়াটির নাম দিয়েছেন app, যা Appআমি উপরে বলেছি, প্রতিক্রিয়া হুক ত্রুটি এড়াতে পরিবর্তন করা উচিত ।

Answer 25

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

Answer 26

অ্যাপ ফাংশনে আপনি শব্দটির বানান ভুল করেছেন setpersonSate, চিঠিটি হারিয়েছেন t, সুতরাং এটি হওয়া উচিত setpersonState।

ত্রুটি :

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

সমাধান :

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

Answer 27

এটি প্রতিক্রিয়া হুকগুলির জন্য ESLint নিয়মের কারণে। নিয়মের লিঙ্কটি এখানে সন্ধান করুন:

প্রতিক্রিয়া হুক জন্য ESLint নিয়ম

এখন পর্যন্ত, নিয়মটি নং লাইনে বর্ণিত হয়েছে। 44।

Answer 28

ক্রিয়ামূলক উপাদান তৈরি করতে তীর ফাংশন ব্যবহার করবেন না।

নীচের উদাহরণগুলির মধ্যে একটি হিসাবে করুন:

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

Comments

আপনি আরও ব্যাখ্যা করতে পারেন, "ক্রিয়ামূলক উপাদান তৈরি করতে তীর ফাংশনটি ব্যবহার করবেন না কেন"। ? - ধন্যবাদ

— হুয়ান

কিছু পরিস্থিতিতে ব্যবহারের স্টেট () নিয়ে সমস্যা এড়াতে যেমন এই ক্ষেত্রে: কোডস্যান্ডবক্স.আইও

— এস