setTimeout in React Native

Question

React Nativeで構築されたiOSアプリのスプラッシュ画面を読み込もうとしています。私は次のようにクラスの状態、その後、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がtrueに状態を変更しようとしたとき、私は推測する、私のプログラムがクラッシュする： '未定義はオブジェクトではない（this.setStateを評価する）'。私は数時間、これを修正する方法に関するアイデアを出してきましたか？

Answer 1

settimeoutの新しい関数を記述します。 Plsはこれを試してください。

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

古典的なjavascriptの誤り。

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

setTimeoutがthis.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);