বিক্রিয়া জেএস: সেটটাইমআউট () কাজ করছে না?

Question 1

এই কোডটি মাথায় রেখে:

var Component = React.createClass({

    getInitialState: function () {
        return {position: 0};    
    },

    componentDidMount: function () {
        setTimeout(this.setState({position: 1}), 3000);
    },

    render: function () {
         return (
            <div className="component">
                {this.state.position}
            </div>
         ); 
    }

});

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

রাষ্ট্রটি কি কেবল 3 সেকেন্ড পরে পরিবর্তিত হওয়ার কথা নয়? এটি অবিলম্বে পরিবর্তন হচ্ছে।

এখানে আমার মূল লক্ষ্যটি প্রতি 3 সেকেন্ডে (রাষ্ট্রীয় setInterval()) পরিবর্তন করা, তবে যেহেতু এটি কাজ করছে না, তাই চেষ্টা করেছি setTimeout(), যা কাজ করছে না। এই কোন বাতি? ধন্যবাদ!

Question 2

কর

setTimeout(
    function() {
        this.setState({ position: 1 });
    }
    .bind(this),
    3000
);

অন্যথায়, আপনি ফলাফল পাস setStateকরছেন setTimeout।

আপনি thisকীওয়ার্ডের ব্যবহার এড়াতে ES6 তীর ফাংশনগুলিও ব্যবহার করতে পারেন :

setTimeout(
  () => this.setState({ position: 1 }), 
  3000
);

Question 3

setTimeout(() => {
  this.setState({ position: 1 });
}, 3000);

উপরেরগুলিও কাজ করবে কারণ ES6 তীর ফাংশনটি প্রসঙ্গে পরিবর্তন করে না this।

Question 4

যে কোনও সময় আমরা একটি টাইমআউট তৈরি করি আমাদের ইলেক্ট্রন উইলউনমাউন্টে এটি সাফ করা উচিত, যদি এটি এখনও চালিত না হয়।

      let myVar;
         const Component = React.createClass({

            getInitialState: function () {
                return {position: 0};    
            },

            componentDidMount: function () {
                 myVar = setTimeout(()=> this.setState({position: 1}), 3000)
            },

            componentWillUnmount: () => {
              clearTimeout(myVar);
             };
            render: function () {
                 return (
                    <div className="component">
                        {this.state.position}
                    </div>
                 ); 
            }

        });

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

Question 5

আমি জানি এটি কিছুটা পুরানো, তবে লক্ষ্য করা গুরুত্বপূর্ণ যে উপাদানটি আনমাট করার সময় প্রতিক্রিয়া অন্তর সাফ করতে পুনরুদ্ধার করে: https://reactjs.org/docs/state-and-lifecycle.html

সুতরাং আমি এই আলোচনায় এই উত্তরটি যুক্ত করতে চাই:

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

Question 6

setStateপ্রথম বন্ধনী কারণে তত্ক্ষণাত আহ্বান করা হচ্ছে! এটি একটি বেনামে ফাংশনে মুড়িয়ে রাখুন, তারপরে এটিকে কল করুন:

setTimeout(function() {
    this.setState({position: 1})
}.bind(this), 3000);

Question 7

কাকে সেটটাইমআউট বলেছে তা আপনি জানাননি

এখানে আপনি কীভাবে অতিরিক্ত ফাংশনগুলি কল না করে টাইমআউট কল করবেন।

1. আপনি অতিরিক্ত ফাংশন না করে এটি করতে পারেন।

setTimeout(this.setState.bind(this, {position:1}), 3000);

ফাংশন.প্রোটোটাইপ.বাইন্ড () ব্যবহার করে

সেটটাইমআউট ফাংশনটির অবস্থান নেয় এবং এটি প্রসঙ্গে রাখে।

২. আরও কম কোড লিখেও একই কাজ করার আরেকটি উপায়।

setTimeout(this.setState, 3000, {position:1});

সম্ভবত কোনও সময়ে একই বাঁধাই পদ্ধতিটি ব্যবহার করে

সেটটাইমআউটটি কেবল ফাংশনের অবস্থান নেয় এবং ফাংশনে ইতিমধ্যে প্রসঙ্গটি রয়েছে? যাইহোক, এটি কাজ করে!

দ্রষ্টব্য: আপনি js তে ব্যবহার করেন এমন কোনও ফাংশন নিয়ে এই কাজ করে।

Question 8

আপনার কোড স্কোপ ( this)window আপনার প্রতিক্রিয়া উপাদান নয়, বরং আপনার অবজেক্ট হবে এবং সে কারণেই setTimeout(this.setState({position: 1}), 3000)এইভাবে ক্রাশ হবে।

এটি জাভাস্ক্রিপ্ট থেকে আসে প্রতিক্রিয়া নয়, এটি জেএস বন্ধ

সুতরাং, আপনার বর্তমান প্রতিক্রিয়া উপাদান অংশটি বাঁধতে, এটি করুন:

setTimeout(function(){this.setState({position: 1})}.bind(this), 3000);

অথবা যদি আপনার ব্রাউজারটি এস 6 সমর্থন করে বা আপনার প্রজদের এস 6 এএস 5 সংকলন করার জন্য সমর্থন রয়েছে, তীর ফাংশনটিও চেষ্টা করে দেখুন, তীর ফানক 'এই' সমস্যাটি সমাধান করার জন্য:

setTimeout(()=>this.setState({position: 1}), 3000);

Question 9

'সেটটাইমআউট' ফাংশনের ভিতরে স্কোপটি অ্যাক্সেস করার 3 টি উপায় রয়েছে

প্রথম,

const self = this
setTimeout(function() {
  self.setState({position:1})
}, 3000)

দ্বিতীয়টি হচ্ছে ES6 তীর ফাংশনটি ব্যবহার করা, কারণ তীর ফাংশনটির নিজস্ব সুযোগ নেই (এটি)

setTimeout(()=> {
   this.setState({position:1})
}, 3000)

তৃতীয়টি হ'ল ফাংশনের অভ্যন্তরের সুযোগটি আবদ্ধ করা

setTimeout(function(){
   this.setState({position:1})
}.bind(this), 3000)

Question 10

আপনি সিনট্যাক্স ঘোষণার ত্রুটি করেছেন, সঠিক সেটটাইমআউট ঘোষণাটি ব্যবহার করুন

message:() => { 
  setTimeout(() => {this.setState({opened:false})},3000); 
  return 'Thanks for your time, have a nice day 😊! 
}

Question 11

সেট টাইমআউট এর ES6 সিনট্যাক্স ব্যবহার করার চেষ্টা করুন। সাধারণ জাভাস্ক্রিপ্ট সেটটাইমআউট () জ্যাক্সে প্রতিক্রিয়া দেখায় না

setTimeout(
      () => this.setState({ position: 100 }), 
      5000
    );