ComponentWillMount se eliminará de la futura versión de React Native. Mi aplicación necesita obtener datos API asíncronos del servidor antes de renderizar, ¿cómo hacerlo? El constructor no puede ser asíncrono. ¿O tengo que usar promise().then en el constructor?

1
user938363 11 may. 2019 a las 09:11

3 respuestas

La mejor respuesta

Yo usaría componentDidMount.

Debido a la naturaleza de los eventos asíncronos en JavaScript, cuando inicia una llamada API, el navegador vuelve a hacer otro trabajo mientras tanto. Cuando React está renderizando un componente, no espera a que componentWillMount termine lo que sea que comenzó.

Así que componentWillMount sobre componentDidMount probablemente no le estaba dando ninguna ventaja de todos modos.

2
Francesco Meli 11 may. 2019 a las 06:33

Creo que deberíamos usar la carga porque significa que tenemos que trabajar en los datos antes de que la pantalla sea visible.

Example.js

...
this.state={
     loading: false
}
....

async ComponentDidMount() {
     ....
     await your code
     ....
    this.setState({
      loading: true
    });
}

...

render{
   if(this.state.loading === false){
     <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
   return(...);
  }
...


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})
1
hong developer 11 may. 2019 a las 12:19

Creo que se supone que debes usar ComponentDidMount en su lugar. El hecho de que el componente se procese sin datos se maneja mejor utilizando un indicador loading en su estado.

1
Jonas Rosenqvist 11 may. 2019 a las 06:26