it-swarm.com.de

setTimeout in React Native

Ich versuche, einen Begrüßungsbildschirm für eine in React Native integrierte iOS-App zu laden. Ich versuche, dies durch Klassenstatus und eine setTimeout-Funktion wie folgt zu erreichen:

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

Die Ladeseite funktioniert für eine Sekunde, und wenn setTimeout versucht, den Status in true zu ändern, stürzt mein Programm ab: 'undefined ist kein Objekt (wertet this.setState aus)'. Ich bin schon seit ein paar Stunden dabei, irgendwelche Ideen, wie man das beheben kann?

47
Phil

Klassischer Javascript-Fehler.

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

Wenn setTimeoutthis.setState läuft, ist this nicht mehr CowtanApp, sondern window. Wenn Sie die Funktion mit der =>-Notation definieren, bindet es6 automatisch this.

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

Alternativ können Sie einen let that = this; oben in Ihrer render verwenden und dann Ihre Referenzen wechseln, um die lokale Variable zu verwenden.

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

Schreiben Sie eine neue Funktion für Settimeout. Bitte versuchen Sie es. 

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

In ReactNative .53 funktioniert Folgendes für mich:

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

'setTimeout' ist die Bibliotheksfunktion ReactNative.
'this.timeoutCheck' ist meine Variable, um das Timeout-Objekt zu halten.
'this.setTimePassed' ist meine Funktion, die ich beim Timeout aufrufen möchte.

4
david m lee

Sie können this an Ihre Funktion binden, indem Sie .bind(this) direkt am Ende Ihrer Funktionsdefinition hinzufügen. Sie würden Ihren Codeblock wie folgt umschreiben:

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

Ändern Sie diesen Code:

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

zu dem Folgendem:

setTimeout(()=>{this.setState({timePassed: true})}, 1000); 
1
wandhi Zakari

Es scheint ein Problem zu geben, wenn die Uhrzeit des Telefons/Emulators von der des Servers abweicht (auf dem der reaktionsbasierte Packager ausgeführt wird). In meinem Fall gab es einen 1-minütigen Unterschied zwischen der Uhrzeit des Telefons und des Computers. Nach der Synchronisierung (nichts Besonderes getan, das Telefon wurde auf manuelle Zeit eingestellt, und ich habe es nur so eingestellt, dass es die vom Netzwerk (sim) zur Verfügung gestellte Zeit verwendet), hat alles gut funktioniert. This Github Problem half mir, das Problem zu finden.

1
Alex Buicescu
const getData = () => {
// some functionality
}

const that = this;
   setTimeout(() => {
   // write your functions    
   that.getData()
},6000);

Die einfache Settimeout-Funktion wird nach 6000 Millisekunden ausgelöst

0
krishnazden

Niemals setState innerhalb der render -Methode aufrufen

Sie sollten niemalssetState innerhalb der render -Methode aufrufen. Warum? Der Aufruf von setState löst schließlich die Methode render erneut aus. Das bedeutet, dass Sie setState (in Ihrem render -Block erwähnt) in einer Schleife aufrufen, die niemals enden würde. Der richtige Weg, dies zu tun, ist die Verwendung von componentDidMount Hook in React, wie folgt:

class CowtanApp extends Component {
  state = {
     timePassed: false
  }

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

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

PS Verwenden Sie ternäre Operatoren für saubereren, kürzeren und lesbaren Code.

0

Dasselbe wie oben, könnte einigen Leuten helfen. 

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
Dunken_sai