ত্রুটি:অনির্ধারিত এর 'সেট স্টেট' সম্পত্তি পড়া যাবে না

আপনি যখন প্রথম প্রতিক্রিয়া উপাদানগুলি লিখতে শুরু করেন, তখন আপনি পথে বিভিন্ন ত্রুটির সম্মুখীন হতে পারেন। এই ধরনের দুটি ত্রুটি হল "অনির্ধারিত সম্পত্তি 'setState' পড়তে পারে না" এবং "this.setState একটি ফাংশন নয়"। এই নিবন্ধটি এই ত্রুটিগুলি দূর করার কয়েকটি উপায়ের দিকে নজর দেয়।

কেন?

এই ত্রুটিগুলি ঘটে কারণ আপনি যে পদ্ধতিটি ব্যবহার করছেন বা আপনার প্রতিক্রিয়া উপাদানে আহ্বান করছেন তা সঠিকভাবে আবদ্ধ নয়৷ এখানে কোডের একটি উদাহরণ যা ত্রুটি ঘটবে (এটি ধরে নেয় যে আপনি আপনার প্রতিক্রিয়া উপাদানটি সঠিকভাবে সেট আপ করেছেন):

import React from "react";
import "./styles.css";
 
class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     input: ""
   };
 }
 
 handleChange(e) {
   this.setState({[e.target.name]: e.target.value})
 }
 render() {
   console.log(this.state)
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }
}
 
export default App;

প্রথম নজরে, কোডটি ঠিক দেখায়, কিন্তু যদি আমরা কাছাকাছি তাকাই, আমরা দেখতে পাই হ্যান্ডেল চেঞ্জ পদ্ধতিটি অ্যাপ ক্লাসের সাথে আবদ্ধ নয় তাই "এই" কীওয়ার্ডটি এই উদাহরণে উইন্ডোকে নির্দেশ করবে। আরও ঘনিষ্ঠভাবে দেখার জন্য, আসুন handleChange পদ্ধতির প্রথম লাইন এবং তারপর রেন্ডারের প্রথম লাইনে একটি console.log(এই) যোগ করি:

handleChange(e) {
   console.log(this, "change")
   this.setState({[e.target.name]: e.target.value})
 }

render() {
   console.log(this, "render")
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }

আমরা অ্যাপ্লিকেশনটি লোড করার সময় যদি আমরা কনসোলটি একবার দেখি, আমরা দেখতে পাব যে "এই" কীওয়ার্ডটি অ্যাপকে বোঝায়। যদি আমরা আমাদের ইনপুট ব্যবহার করার চেষ্টা করি, আমরা স্ক্রিনে একটি ত্রুটি পাই, কিন্তু আমরা যদি কনসোলটি দেখি, আমরা দেখতে পাব যে "এই" কীওয়ার্ডটি উইন্ডো অবজেক্টকে বোঝায়, অ্যাপ নয়। এই সমস্যাটি সমাধান করার দুটি উপায় রয়েছে:

1. বাঁধাই পদ্ধতি

কনস্ট্রাক্টরের ভিতরে, স্টেট অবজেক্টের পরে, এই লাইনটি ইনপুট করুন:

   this.handleChange = this.handleChange.bind(this);

এই লাইনটি হ্যান্ডেল চেঞ্জ পদ্ধতিতে "এই" কীওয়ার্ডটিকে আবদ্ধ করবে যাতে এটি হ্যান্ডেল চেঞ্জের আহ্বান করার সময় স্পষ্টভাবে অ্যাপ উপাদানটিকে উল্লেখ করতে পারে। অন্যথায়, পদ্ধতিটি আপনি যে উপাদানটির সাথে কাজ করতে চান তা জানেন না বা দেখতে পাবেন না।

2. ES6 তীর ফাংশন

বড় তীর ফাংশনের জন্য ES6 সিনট্যাক্স ব্যবহার করুন। এটি স্বয়ংক্রিয়ভাবে "এই" কীওয়ার্ডটিকে সেই পদ্ধতিতে আবদ্ধ করে যাতে আপনাকে এটি কনস্ট্রাক্টরে আবদ্ধ করতে হবে না:

handleChange = (e) => {
   this.setState({[e.target.name]: e.target.value})
 }

সেখানে আপনি এটা আছে! এভাবেই আপনি React-এ ক্লাস কম্পোনেন্ট স্ট্রাকচার ব্যবহার করার সময় "this.setState" "অনির্ধারিত" বা "ফাংশন নয়" ত্রুটি থেকে মুক্তি পাবেন। আপনি যদি ভবিষ্যতে এই ত্রুটিগুলি রোধ করতে চান, তবে আপনার প্রতিক্রিয়া উপাদানটিকে এর পরিবর্তে প্রতিক্রিয়া হুকগুলির সাথে কার্যকরী উপাদানগুলি ব্যবহার করার জন্য রিফ্যাক্টর করুন!

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।