pause - settimeout javascript

setTimeout en React Native

Question

Estoy tratando de cargar una pantalla de inicio para una aplicación iOS integrada en React Native. Estoy tratando de lograr esto a través de estados de clase y luego una función setTimeout de la siguiente manera:

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 página de carga funciona por un segundo, y luego supongo que cuando setTimeout intenta cambiar el estado a verdadero, mi programa se bloquea: ''undefined no es un objeto (evaluando this.setState)''. He estado yendo a esto durante un par de horas, ¿alguna idea sobre cómo solucionarlo?

Answer 1

Nunca llame a setState dentro del método de render

Nunca debe llamar a setState dentro del método de render . ¿Por qué? llamar a setState finalmente setState el método de render nuevamente. Eso significa que está llamando a setState (mencionado en su bloque de render ) en un bucle que nunca terminaría. La forma correcta de hacerlo es mediante el uso de hook componentDidMount en React, así:

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 Utilice operadores ternarios para obtener un código más limpio, más corto y legible.

Answer 2

Cambia este código:

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

a lo siguiente:

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

Answer 3

En ReactNative .53, lo siguiente funciona para mí:

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

''setTimeout'' es la función de la biblioteca ReactNative.
''this.timeoutCheck'' es mi variable para contener el objeto de tiempo de espera.
''this.setTimePassed'' es mi función para invocar en el tiempo de espera.

Answer 4

Error clásico de JavaScript.

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

Cuando setTimeout ejecuta this.setState , ya no se trata de CowtanApp , sino de window . Si define la función con la notación => , es6 lo enlazará automáticamente.

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

Alternativamente, puede usar let that = this; en la parte superior de su render , luego cambie sus referencias para usar la variable local.

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

Answer 5

Escribe una nueva función para settimeout. Por favor intente esto.

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 6

Igual que el anterior, podría ayudar a algunas personas.

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);

Answer 7

Parece haber un problema cuando la hora del teléfono / emulador es diferente a la del servidor (donde se está ejecutando el paquete nativo de reacción). En mi caso, hubo una diferencia de 1 minuto entre la hora del teléfono y la computadora. Después de sincronizarlos (no hizo nada lujoso, el teléfono se configuró en hora manual, y simplemente lo configuré para usar la red (sim) hora proporcionada), todo funcionó bien. This problema de github me ayudó a encontrar el problema.

Answer 8

Puede vincular this a su función agregando .bind(this) directamente al final de la definición de su función. Reescribiría su bloque de código como:

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

Answer 9

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

La función Settimout simple se activa después de 6000 milisegundos