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?
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);
é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',
      }}/>
  );
}
}
}
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.
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);
Modifier ce code:
setTimeout(function(){this.setState({timePassed: true})}, 1000);
à ce qui suit:
setTimeout(()=>{this.setState({timePassed: true})}, 1000); 
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);