ReactJS: setTimeout () काम नहीं कर रहा है?

Question

इस कोड को ध्यान में रखते हुए:

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(), जो या तो काम नहीं कर रहा है। इस पर कोई रोशनी? धन्यवाद!

Comments

यदि आपके पास foo(bar())तो barहै पहले मार डाला और उसके रिटर्न मान पर पारित कर दिया है foo।

— फेलिक्स क्लिंग

@FelixKling जो सही लगता है, लेकिन उचित नहीं है। चूंकि foo()यहाँ barवांछित समय समाप्त होने के बाद निष्पादित करना है । या क्या मैं पूरी तरह से गलत हूं और यह तुरंत लागू होता है, और केवल वांछित समय के बाद वापसी मूल्य?

— जबरादास

"चूंकि फू () यहाँ वांछित समय समाप्ति के बाद बार को निष्पादित करने के लिए है।" सही है, इसीलिए आपको पास करना होगा bar, इसे कॉल नहीं करना होगा और इसके रिटर्न वैल्यू को पास करना होगा । क्या आप foo(bar())बदलाव के व्यवहार की अपेक्षा करते हैं, यह निर्भर करता है कि क्या fooकर रहा है? यह वास्तव में अजीब होगा।

— फेलिक्स क्लिंग

Answer 1

करना

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

अन्यथा, आप का परिणाम गुजर रहे हैं setStateकरने के लिए setTimeout।

thisकीवर्ड के उपयोग से बचने के लिए आप ES6 एरो फ़ंक्शंस का भी उपयोग कर सकते हैं :

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

Comments

हाँ समझ में आता है और यह काम कर रहा है। लेकिन फ़ंक्शन () एक फ़ंक्शन नहीं है? तो हमें इसे बांधने की आवश्यकता क्यों होगी? मैंने पहले से ही कोशिश की और यह वास्तव में आवश्यक है, मैं सिर्फ यह जानना चाहता था कि क्यों। आपकी मदद के लिए सराहना :)

— jbarradas

मुझे नहीं लगता कि आप यह क्यों कह रहे हैं कि यह सेटटाइमआउट का परिणाम होगा, यह कैसे काम नहीं करता है? उस मामले में क्या व्यवहार है?

— पॉजिटिव

आप में से जो लोग ES6 एरो फ़ंक्शंस का उपयोग करना पसंद करते हैं: setTimeout(() => {this.setState({ position: 1 })}, 3000)@PositiveGuy सुनिश्चित नहीं हैं कि आपने इस प्रश्न पर पोस्ट किए जाने के बाद से ही इस पर शोध किया है, लेकिन यदि आप नहीं हैं: डैनियल के मूल उदाहरण .bind(this)के thisसंदर्भ को प्रतिबंधित करने की आवश्यकता है setState- अन्यथा , thisस्वचालित रूप से उस संदर्भ को संदर्भित करेगा जिसमें इसे लागू किया गया है (इस मामले में, अनाम functionको पारित किया जा रहा है setTimeout)। ES6 तीर फ़ंक्शंस, हालांकि, लेक्सिक रूप से स्कोप किए गए हैं - वे thisउस संदर्भ तक सीमित हैं जिसमें उन्हें बुलाया जाता है।

— Zac Collier

काम नहीं करता है ... setTimeout (() => {if! (यह। Props.logoIsLoading &&! यह .props.isLoading) {कंसोल.लॉग (happen क्या हम होगा? ’)’; This.setState ({..) .this.state, shouldUpdate: false, itemToUpdate: null, modalIsOpen: false, modalTitle: 'नया संगठन जोड़ें'});}}}, 100); वर्ग वाक्य रचना चीनी वर्ग के संदर्भ में इसका संगठन घटक का विस्तार करता है {कंसोल.लॉग को कभी भी कंसोल नहीं मिलता है। ('क्या हम होगा?'); इसके पहले और उसके बाद सब कुछ लॉग इन है।

— जूललिनटेक

@juslintek परिभाषित नहीं काम करते हैं। यदि आवश्यक हो तो एक नया प्रश्न पूछें।

— डैनियल ए। व्हाइट

Answer 2

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

ऊपर भी काम करेगा क्योंकि ES6 तीर फ़ंक्शन के संदर्भ को नहीं बदलता है this।

Comments

ईएस 6 सिंटैक्स को रिएक्ट में सर्वोत्तम प्रथाओं के लिए स्वीकृत उत्तर होना चाहिए। दोनों काम करेंगे, लेकिन यह अधिक सुरुचिपूर्ण और हैंडल है this।

— mccambridge

Answer 3

कभी भी हम एक टाइमआउट बनाते हैं, हमें इसे घटकव्यूएनमाउंट पर स्पष्ट करना चाहिए, अगर यह अभी तक नहीं हटाया गया है।

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

Answer 4

मुझे पता है कि यह थोड़ा पुराना है, लेकिन यह ध्यान रखना महत्वपूर्ण है कि जब घटक अनमाउंट करता है तो https://ctctjs.org/docs/state-and-lifecycle.html पर प्रतिक्रिया करने के लिए रीएक्ट अंतराल को खाली करने के लिए पुन: प्रयास करता है।

इसलिए मैं इस चर्चा में इस उत्तर को जोड़ना पसंद करता हूं:

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

Answer 5

setStateकोष्ठक के कारण तुरंत लागू किया जा रहा है! इसे एक अनाम फ़ंक्शन में लपेटें, फिर इसे कॉल करें:

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

Answer 6

आपने यह नहीं बताया कि सेटटाइमआउट किसे कहते हैं

यहां आप अतिरिक्त कार्यों को कॉल किए बिना टाइमआउट कैसे कहते हैं।

1. आप अतिरिक्त कार्य किए बिना ऐसा कर सकते हैं।

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

Function.prototype.bind () का उपयोग करता है

सेटटाइमआउट फ़ंक्शन का स्थान लेता है और इसे संदर्भ में रखता है।

2. कम कोड लिखकर भी ऐसा ही करने का एक और तरीका।

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

संभवतः किसी बिंदु पर उसी बाइंड पद्धति का उपयोग करता है

सेटटाइमआउट केवल फ़ंक्शन का स्थान लेता है और फ़ंक्शन के पास पहले से ही संदर्भ है? वैसे भी, यह काम करता है!

नोट: ये आपके द्वारा js में उपयोग किए गए किसी भी फ़ंक्शन के साथ काम करते हैं।

Answer 7

आपका कोड स्कोप ( this) आपका windowऑब्जेक्ट होगा, न कि आपका रिएक्शन कंपोनेंट, और इसी वजह से setTimeout(this.setState({position: 1}), 3000)यह क्रैश होगा।

यह जावास्क्रिप्ट नहीं रिएक्ट से आता है, यह जेएस क्लोजर है

---

तो, अपने वर्तमान प्रतिक्रिया घटक गुंजाइश को बांधने के लिए, यह करें:

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

या यदि आपका ब्राउज़र es6 का समर्थन करता है या आपके proj को es6 को es5 संकलित करने के लिए समर्थन है, तो तीर फ़ंक्शन को भी आज़माएं, साथ ही तीर की फ़ेंक को 'इस' समस्या को ठीक करना है:

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

Answer 8

'सेटटाइमआउट' फ़ंक्शन के अंदर गुंजाइश तक पहुंचने के लिए 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)

Answer 9

आपने सिंटैक्स घोषणा त्रुटि की, उचित सेटटाइमआउट घोषणा का उपयोग करें

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