setTimeout in React Native

Ich versuche, einen Begrüßungsbildschirm für eine in React Native integrierte iOS-App zu laden. Ich versuche dies durch Klassenzustände und dann 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 dann schätze ich, wenn setTimeout versucht, den Status auf „true“ zu ändern, stürzt mein Programm ab: „undefined is not an object (evaluating this.setState)“. Ich mache das seit ein paar Stunden, habt ihr eine Idee, wie ich das beheben kann?

Klassischer Javascript-Fehler.

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

Wann setTimeout läuft this.setState, this ist nicht mehr CowtanAppaber window. Wenn Sie die Funktion mit der definieren => Notation wird es6 automatisch binden this.

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

Alternativ können Sie auch eine verwenden let that = this; an der Spitze Ihrer renderund wechseln Sie dann Ihre Referenzen, um die lokale Variable zu verwenden.

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

Wenn nicht funktioniert, verwenden bind.

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

Schreiben Sie eine neue Funktion für settimeout. Bitte versuchen Sie dies.

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

const getData = () => {
// some functionality
}

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

Einfache Settimout-Funktion wird nach 6000 Millisekunden ausgelöst

Ändern Sie diesen Code:

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

Zu dem Folgendem:

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

Auf ReactNative .53 funktioniert Folgendes für mich:

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

„setTimeout“ ist die ReactNative-Bibliotheksfunktion.
‘this.timeoutCheck’ ist meine Variable, um das Timeout-Objekt zu halten.
‘this.setTimePassed’ ist meine Funktion, die beim Timeout aufgerufen werden soll.

Falls es jemand möchte, können Sie den Timer auch asynchron machen und darauf warten:

export const delay = (ms) => new Promise((res) => setTimeout(res, ms));

Verwendungszweck:

// do something
await delay(500); // wait 0.5 seconds
// do something else

Sie können binden this zu Ihrer Funktion durch Hinzufügen .bind(this) direkt an das Ende Ihrer Funktionsdefinition. Sie würden Ihren Codeblock wie folgt umschreiben:

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