setTimeout dans React Native

j'essaie de charger un écran de projection pour une application iOS construite dans React Native. J'essaie d'accomplir ceci à travers les états de classe et puis une fonction de mise à l'écart comme suit:

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',
          }}/>
      );
    }
  }
}

la page de chargement fonctionne pendant une seconde, et puis je suppose que quand setTimeout essaye de changer l'état en true, mon programme s'écrase: 'undefined n'est pas un objet (évaluer ceci.setState)". Je fais ça depuis quelques heures, des idées sur la façon de le réparer?

37
demandé sur Phil 2015-12-29 07:14:35

6 réponses

erreur javascript Classique.

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

Quand setTimeout pistes this.setState,this n'est plus CowtanApp, mais window. Si vous définissez la fonction avec l' => notation, es6 auto-bind this.

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

Sinon, vous pouvez utiliser un let that = this; au sommet de votre render, puis changez vos références pour utiliser la variable locale.

render() {
  let that = this;
  setTimeout(function(){that.setState({timePassed: true})}, 1000);
85
répondu user1221780 2017-03-16 15:46:59

écrire une nouvelle fonction pour settimeout. Svp essayez cette.

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',
      }}/>
  );
}
}
}
10
répondu Phyo 2015-12-29 04:25:35

On ReactNative .53, les ouvrages suivants, pour moi:

 this.timeoutCheck = setTimeout(() => {
   this.setTimePassed();
   }, 400);

'setTimeout' est la fonction de bibliothèque Réactnative.

"cela.timeoutCheck' est ma variable pour maintenir l'objet time out.

"cela.setTimePassed' est ma fonction à invoquer au moment de l'arrêt.

4
répondu david m lee 2018-08-18 19:41:51

Vous pouvez lier this à votre fonction en ajoutant .bind(this) directement à la fin de la définition de fonction. Vous réécrire votre bloc de code:

setTimeout(function () {
  this.setState({ timePassed: true });
}.bind(this), 1000);
2
répondu Scott Carpenter 2018-02-26 07:25:31

Modifier ce code:

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

à ce qui suit:

setTimeout(()=>{this.setState({timePassed: true})}, 1000); 
1
répondu wandhi Zakari 2018-08-09 06:26:08

idem que ci-dessus, pourrait aider certaines personnes.

setTimeout(() => {
  if (pushToken!=null && deviceId!=null) {
    console.log("pushToken & OS ");
    this.setState({ pushToken: pushToken});
    this.setState({ deviceId: deviceId });
    console.log("pushToken & OS "+pushToken+"\n"+deviceId);
  }
}, 1000);
0
répondu Dunken_sai 2018-09-20 09:54:32