प्रतिक्रिया मूल में सेटटाइम

Question

मैं प्रतिक्रिया मूल में निर्मित आईओएस ऐप के लिए एक स्प्लैश स्क्रीन लोड करने का प्रयास कर रहा हूं। मैं कक्षा राज्यों के माध्यम से यह पूरा करने के तो इस प्रकार एक setTimeout सुविधा कोशिश कर रहा हूँ और:

class CowtanApp extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     timePassed: false 
    }; 
    } 

    render() { 
    setTimeout(function(){this.setState({timePassed: true})}, 1000); 
    if (!this.state.timePassed){ 
     return <LoadingPage/>; 
    }else{ 
     return (
     <NavigatorIOS 
      style = {styles.container} 
      initialRoute = {{ 
      component: LoginPage, 
      title: 'Sign In', 
      }}/> 
    ); 
    } 
    } 
} 

पृष्ठ लोड एक पल के लिए काम करता है, और उसके बाद मैं जब setTimeout सच करने के लिए राज्य को बदलने की कोशिश करता है लगता है, मेरे प्रोग्राम दुर्घटनाग्रस्त: 'अपरिभाषित एक वस्तु नहीं है (इस .setState का मूल्यांकन)'। मैं इसे कुछ घंटों तक चला रहा हूं, इसे ठीक करने के तरीके पर कोई विचार?

Answer 1

सेटटाइम के लिए एक नया फ़ंक्शन लिखें। कृपया इसे आज़माएं।

class CowtanApp extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
    timePassed: false 
    }; 
} 

componentDidMount() { 
    this.setTimeout(() => { 
    this.setTimePassed(); 
    },1000); 
} 

setTimePassed() { 
    this.setState({timePassed: true}); 
} 


render() { 

if (!this.state.timePassed){ 
    return <LoadingPage/>; 
}else{ 
    return (
    <NavigatorIOS 
     style = {styles.container} 
     initialRoute = {{ 
     component: LoginPage, 
     title: 'Sign In', 
     }}/> 
); 
} 
} 
} 

Answer 2

क्लासिक जावास्क्रिप्ट गलती।

setTimeout(function(){this.setState({timePassed: true})}, 1000) 

जब setTimeoutthis.setState चलाता है, this नहीं रह गया है CowtanApp, लेकिन window है। यदि आप => नोटेशन के साथ फ़ंक्शन को परिभाषित करते हैं, तो es6 this ऑटो-बाइंड करेगा।

setTimeout(() => {this.setState({timePassed: true})}, 1000) 

वैकल्पिक रूप से, आप अपने संदर्भ के लिए अपने render के शीर्ष पर एक let that = this; इस्तेमाल कर सकते हैं, तो स्विच स्थानीय चर का उपयोग करने के लिए।

render() { 
    let that = this; 
    setTimeout(function(){that.setState({timePassed: true})}, 1000); 

Answer 3

आप अपने समारोह परिभाषा के अंत करने के लिए सीधे .bind(this) जोड़कर अपने कार्य करने के लिए बाध्य कर सकते हैं this। आप अपने कोड ब्लॉक को फिर से लिखेंगे:

setTimeout(function() { 
    this.setState({ timePassed: true }); 
}.bind(this), 1000);