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