প্রতিক্রিয়া - অপরিচিত টাইপ এরির: অপরিজ্ঞাতকৃত সম্পত্তি 'সেটস্টেট' পড়তে পারে না


315

আমি নিম্নলিখিত ত্রুটি পাচ্ছি

আনকচড টাইপ এরির: অপরিজ্ঞাতকৃত সম্পত্তি 'সেটস্টেট' পড়তে পারে না

এমনকি কনস্ট্রাক্টরে বেল্ট বেল্ট পরেও।

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

4
ES6 এ, আপনি এই সমস্যাটি ঠিক করতে ফাংশন ঘোষণার জন্য তীর ফাংশন ব্যবহার করতে পারেন।
তাল

^ এটি সঠিক উত্তর হওয়া উচিত
জর্দেক

আমি আমার প্রতিক্রিয়া ফাংশনটি ES6, এবং হ্যারে, এর কাজটিতে পরিবর্তিত করেছি।
অশ্বানী গার্গ

উত্তর:


447

এটি this.deltaআবদ্ধ না হওয়ার কারণে this

this.delta = this.delta.bind(this)কনস্ট্রাক্টরে সেট বাঁধতে :

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}

বর্তমানে আপনি বাঁধাই ডাকছেন। তবে বাঁধাই একটি সীমাবদ্ধ ফাংশন দেয়। আপনাকে ফাংশনটির সীমিত মানতে সেট করতে হবে।


186
ES6 শ্রেণীর বিন্দু পৃথিবীতে কী হবে যদি তাদের পদ্ধতিগুলির যথাযথ লেজিকাল thisবাইন্ডিং না থাকে এবং তারপরে তাদের সংজ্ঞাটি সরাসরি তাদের সংজ্ঞায় আবদ্ধ করার জন্য একটি বাক্য গঠনও প্রকাশ না করে !?
AgmLauncher

1
আমি আপনার
বক্তব্যটি

1
@ সুরেশপরিখ একবার আপনি আপনার ফাংশনটি কনস্ট্রাক্টরে বাঁধেন, তখন আপনি যখন কোনও লাইফাইসাইকেল হুক থেকে কল করবেন তখন তা আবদ্ধ হওয়া উচিত।
লেভি ফুলার

4
অ্যান্ড্রয়েড / জাভা ওয়ার্ল্ড থেকে আসছি আমি অবাক হয়েছি
টিউডর

3
ল্যাম্বডা ফাংশনগুলির @GmLauncher ব্যবহার এটি সুস্পষ্টভাবে আবদ্ধ করে। আপনি কোড deltaহিসাবে সংজ্ঞায়িত delta = () => { return this.setState({ count: this.state.count++ }); };হলে কাজ করবে। এখানে ব্যাখ্যা করা হয়েছে: hackernoon.com/…
কে রোডা

144

ইন ES7 + + (ES2016) আপনি পরীক্ষামূলক ব্যবহার করতে পারেন ফাংশন বেঁধে সিনট্যাক্স অপারেটর ::বাধতে। এটি একটি সিনট্যাকটিক চিনি এবং ডেভিন ট্রাইনের উত্তরের মতোই এটি করবে।

এরপরে আপনি আবার লিখতে this.delta = this.delta.bind(this);পারেনthis.delta = ::this.delta;


জন্য ES6 + + (ES2015) আপনার কাছে ES6 ব্যবহার + + পারবেন তীর ফাংশন ( =>) ব্যবহার করতে পাবে this

delta = () => {
    this.setState({
        count : this.state.count + 1
    });
}

কেন? মজিলা ডক থেকে:

তীর ফাংশন না হওয়া পর্যন্ত প্রতিটি নতুন ফাংশন তার নিজস্ব এই মানটিকে সংজ্ঞায়িত করে [...]। এটি প্রোগ্রামিংয়ের একটি অবজেক্ট-ভিত্তিক স্টাইলে বিরক্তিকর প্রমাণিত হয়েছিল।

তীর ফাংশনগুলি বদ্ধ প্রসঙ্গের এই মানটি ক্যাপচার করে [...]



সিনট্যাক্স ছাড়াও একের পর এক ব্যবহার করে কী লাভ?
জেরেমি ডি

2
বাইন্ড সিনট্যাক্সটি পরিষ্কার কারণ আপনি আপনার পদ্ধতির স্বাভাবিক সুযোগ রাখতে পারেন।
ফাবিয়েন সা

বাইন্ড সিনট্যাক্স ES2016 বা ES2017 এর অংশ নয়।
ফেলিক্স ক্লিং

2
@ স্ট্যাকওভারফ্লো যে কোনও উত্তরে অনুদান যুক্ত করার ক্ষমতা যুক্ত করা উচিত।
গাবে

29

ES5 এবং ES6 শ্রেণীর মধ্যে প্রসঙ্গের পার্থক্য রয়েছে। সুতরাং, বাস্তবায়নগুলির মধ্যেও কিছুটা পার্থক্য থাকবে।

এখানে ES5 সংস্করণটি রয়েছে:

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

এবং এখানে ES6 সংস্করণটি রয়েছে:

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta.bind(this)}>+</button>
            </div>
            );
    }
}

কেবল সতর্কতা অবলম্বন করুন, শ্রেণি প্রয়োগের ক্ষেত্রে সিনট্যাক্স পার্থক্যের পাশাপাশি ইভেন্ট হ্যান্ডলার বাইন্ডিংয়ের মধ্যেও পার্থক্য রয়েছে।

ES5 সংস্করণে, এটি

              <button onClick={this.delta}>+</button>

ES6 সংস্করণে, এটি:

              <button onClick={this.delta.bind(this)}>+</button>

জেএসএক্সে তীর ফাংশন বা বাঁধাই ব্যবহার করা একটি খারাপ অভ্যাস। stackoverflow.com/questions/36677733/…
ফাবিয়েন সা

24

প্রতিক্রিয়াতে ES6 কোডটি ব্যবহার করার সময় সর্বদা তীর ফাংশন ব্যবহার করুন, কারণ এই প্রসঙ্গটি স্বয়ংক্রিয়ভাবে এটির সাথে আবদ্ধ হয়

এটা ব্যবহার কর:

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

পরিবর্তে:

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

2
যদি তীর ফাংশন এবং প্যারামিটার ভেরিয়েবলটি কী ভেরিয়েবলের মতো হয় তবে আমি এটিকে ব্যবহার করার পরামর্শ দিচ্ছি this.setState({videos});
jayeshkv

এটা আমার জন্য এটি কি। আমি নোডে নতুন, এবং অ্যাক্সেস মডিউলটির ডক্সটি প্রতিক্রিয়া এবং সেটস্টেটের সাথে বেমানান ছিল
dabobert

20

আপনাকে কোনও কিছু বাঁধতে হবে না, কেবল এই জাতীয় তীর ফাংশন ব্যবহার করুন:

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

    }
    //ARROW FUNCTION
    delta = () => {
        this.setState({
            count: this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

পার্থক্য কি এটি কাজ করে দয়া করে কেন?
রিধা রেজ্জাগ

4
তীর ফাংশন সহ এই সুযোগটি প্রসঙ্গ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত। নিয়মিত ফাংশন সহ, এটি সর্বদা নিকটতম ফাংশনকে বোঝায়, তীর ফাংশনগুলির সাথে এই সমস্যাটি সরিয়ে ফেলা হয় এবং আপনাকে আর এটি = আর কখনও লিখতে হবে না। @ রিজ্জাগ্রিধা
গাবো রুইজ

1
2019 হিসাবে এই পথে যেতে হবে (Y)
এমএইচ

6

আপনি এটি ব্যবহার করতে পারেন:

<button onClick={()=>this.delta()}>+</button>

বা:

<button onClick={event=>this.delta(event)}>+</button>

আপনি যদি কিছু প্যারাম পাস করেন ..


জেএসএক্স
গ্যাব

5

আপনাকে এটি নির্মাণকারীর সাথে আবদ্ধ করতে হবে এবং মনে রাখতে হবে যে কনস্ট্রাক্টরের পরিবর্তনের জন্য সার্ভারটি পুনরায় চালু করা দরকার। অন্যথায়, আপনি একই ত্রুটি দিয়ে শেষ হবে।


1
আমার চুলগুলি টেনে আনছিল কারণ আমি সার্ভারটি পুনরায় চালু করিনি।
kurtcorbett

5

আপনাকে আপনার পদ্ধতিগুলি 'এটি' (ডিফল্ট অবজেক্ট) দিয়ে আবদ্ধ করতে হবে। সুতরাং আপনার ফাংশন যাই হোক না কেন এটি কেবল কনস্ট্রাক্টরে বাঁধাই করা উচিত।

constructor(props) {
    super(props);
    this.state = { checked:false };

    this.handleChecked = this.handleChecked.bind(this);
}

handleChecked(){
    this.setState({
        checked: !(this.state.checked)
    })
}

render(){
    var msg;

    if(this.state.checked){
        msg = 'checked'
    }
    else{
        msg = 'not checked'
    }

    return (
        <div>               
            <input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
            <h3>This is {msg}</h3>
        </div>
    );

4

এই ত্রুটিটি বিভিন্ন পদ্ধতি দ্বারা সমাধান করা যেতে পারে-

  • আপনি যদি ES5 সিনট্যাক্স ব্যবহার করছেন তবে জেএস ডকুমেন্টেশন প্রতিক্রিয়া অনুসারে আপনাকে বাইন্ড পদ্ধতি ব্যবহার করতে হবে ।

    উপরের উদাহরণের জন্য এরকম কিছু:

    this.delta = this.delta.bind(this)

  • আপনি যদি ES6 সিনট্যাক্স ব্যবহার করছেন তবে আপনার বাইন্ড ব্যবহার করার দরকার নেই পদ্ধতি , আপনি এটির মতো কিছু দিয়ে এটি করতে পারেন:

    delta=()=>{ this.setState({ count : this.state.count++ }); }


2

এই সমস্যার দুটি সমাধান রয়েছে:

প্রথম সমাধানটি হল আপনার উপাদানগুলিতে একজন কনস্ট্রাক্টর যুক্ত করুন এবং আপনার ফাংশনটি বেলোয়ের মতো আবদ্ধ করুন:

constructor(props) {
        super(props);

        ...

        this.delta = this.delta.bind(this);
    }

সুতরাং এটি করুন:

this.delta = this.delta.bind(this); 

এর পরিবর্তে:

this.delta.bind(this);

দ্বিতীয় সমাধানটি পরিবর্তে একটি তীর ফাংশন ব্যবহার করা হয়:

delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

আসলে তীর ফাংশন না বেঁধে এটা নিজের ব্যাপার this। তীর ফাংশনগুলি bindপ্রাসঙ্গিকভাবে তাদের প্রসঙ্গটি তাই thisপ্রকৃতপক্ষে উত্পন্ন প্রসঙ্গটি বোঝায়

বাইন্ড ফাংশন সম্পর্কে আরও তথ্যের জন্য:

বাঁধা ফাংশন জাভাস্ক্রিপ্ট বাইন্ড বোঝা ()

তীর ফাংশন সম্পর্কে আরও তথ্যের জন্য:

জাভাস্ক্রিপ্ট ES6 - তীর ফাংশন এবং লেক্সিকাল this


1

আমি নীচের উল্লেখ হিসাবে আপনি এই কীওয়ার্ড দিয়ে নতুন ইভেন্ট বাঁধতে হবে ...

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta = this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
      }
    }

1

যোগ করার পদ্ধতি

onclick = {this.delta.bind (এই)}

সমস্যা সমাধান করবে। আমরা যখন ES6 শ্রেণীর ফাংশনটি কল করার চেষ্টা করি তখন এই ত্রুটিটি আসে, সুতরাং আমাদের পদ্ধতিটি আবদ্ধ করতে হবে।


1

তীর ফাংশন আপনার জীবন অনেক সহজ বাঁধাই এড়াতে করা হতে পারে এই শব্দ। তাই ভালো:

 delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

0

যদিও এই প্রশ্নের ইতিমধ্যে একটি সমাধান ছিল, আমি এটি খালি করতে আমার খালি ভাগ করতে চাই, আশা করি এটি সহায়তা করতে পারে:

/* 
 * The root cause is method doesn't in the App's context 
 * so that it can't access other attributes of "this".
 * Below are few ways to define App's method property
 */
class App extends React.Component {
  constructor() {
     this.sayHi = 'hello';
     // create method inside constructor, context = this
     this.method = ()=> {  console.log(this.sayHi) };

     // bind method1 in constructor into context 'this'
     this.method1 = this.method.bind(this)
  }

  // method1 was defined here
  method1() {
      console.log(this.sayHi);
  }

  // create method property by arrow function. I recommend this.
  method2 = () => {
      console.log(this.sayHi);
  }
   render() {
   //....
   }
}

0
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

  </head>
  <body>
  <div id="root"></div>
    <script type="text/babel">

        class App extends React.Component{

            constructor(props){
                super(props);
                this.state = {
                    counter : 0,
                    isToggle: false
                }
            this.onEventHandler = this.onEventHandler.bind(this);   
            }

            increment = ()=>{
                this.setState({counter:this.state.counter + 1});
            }

            decrement= ()=>{
                if(this.state.counter > 0 ){
                this.setState({counter:this.state.counter - 1});    
                }else{
                this.setState({counter:0});             
                }
            }
            // Either do it as onEventHandler = () => {} with binding with this  // object. 
            onEventHandler(){
                this.setState({isToggle:!this.state.isToggle})
                alert('Hello');
            }


            render(){
                return(
                    <div>
                        <button onClick={this.increment}> Increment </button>
                        <button onClick={this.decrement}> Decrement </button>
                        {this.state.counter}
                        <button onClick={this.onEventHandler}> {this.state.isToggle ? 'Hi':'Ajay'} </button>

                    </div>
                    )
            }
        }
        ReactDOM.render(
        <App/>,
        document.getElementById('root'),
      );
    </script>
  </body>
  </html>

0

আপনাকে যা যা করতে হবে তা থেকে আপনার বাইন্ড স্টেটমেন্টটি পরিবর্তন করুন => this.delta = this.delta.bind (এটি);


0
  1. আপনি নির্দিষ্ট সম্পত্তি তৈরি করেছেন কিনা তা রাষ্ট্রের চেক রাষ্ট্রটি পরীক্ষা করুন

this.state = {
            name: "",
            email: ""
            }
            
           
            
this.setState(() => ({ 
             comments: comments          //comments not available in state
             })) 

2. পরীক্ষা করুন (এই) যদি আপনার কোন ফাংশন ভিতরে setState করছেন (যেমন handleChange) পরীক্ষা এই ফাংশন বেঁধে বা ফাংশন তীর ফাংশন করা হবে কিনা তা।

## এটি নীচের ফাংশনে আবদ্ধ করার জন্য তিনটি উপায় ##

//3 ways for binding this to the below function

handleNameChange(e) {  
     this.setState(() => ({ name }))
    }
    
// 1.Bind while callling function
      onChange={this.handleNameChange.bind(this)}
      
      
//2.make it as arrow function
     handleNameChange((e)=> {  
     this.setState(() => ({ name }))
     })
    
//3.Bind in constuctor 

constructor(props) {
        super(props)
        this.state = {
            name: "",
            email: ""
        }
        this.handleNameChange = this.handleNameChange.bind(this)
        }


0

যদি আপনি ES5 সিনট্যাক্স ব্যবহার করছেন তবে আপনার এটি সঠিকভাবে বাঁধতে হবে

this.delta = this.delta.bind(this)

এবং আপনি যদি ES6 এবং এর বেশি ব্যবহার করে থাকেন তবে আপনি তীর ফাংশনটি ব্যবহার করতে পারেন তবে আপনাকে এটি আবদ্ধ করতে () ব্যবহার করার দরকার নেই

delta = () => {
    // do something
  }
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.