setState 在发布模式下无法正常工作 React Native iOS

Question

I'm fetching some data from a server to load it to my app, my app doesn't load until the app loads all the data, it works perfectly in the debug mode, but when I have to test it on release mode, I have to reload it in order to make it work, and that is not the idea. Here's my code:

import React, { Component } from 'react';
import { Alert, NetInfo, View, Text, AsyncStorage, TouchableWithoutFeedback, Linking, Platform } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Router from './Router';
import OnBoarding from './components/OnBoarding';
import Loading from './components/Loading';
import OneSignal from 'react-native-onesignal';
import axios from 'axios';
var DeviceInfo = require('react-native-device-info');

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
          usage: '',
          categories_hum: [],
          videoshum: [],
          categories_nov: [],
          novedades: [],
          tiendas: [],
          promociones: [],
          listadoCodigos: [],
          token: "",
          listadoCodigosRecibido: true,
          terminos: '',
          notFirst: false
        };
        this.changeUsage = this.changeUsage.bind(this);
      }

    onIds(device) {
      AsyncStorage.setItem('playerId', device.userId);
    }

    onOpened(openResult) {
     if(openResult.notification.payload.additionalData != undefined) {
      var opc = openResult.notification.payload.additionalData.opc;
      if(opc == 2) {
        opc = "2";
        AsyncStorage.setItem('opcion', opc);
      } else if(opc == 1) {
        opc = "1";
        AsyncStorage.setItem('opcion', opc);
      }
     }
    }


    componentWillMount() {
      OneSignal.addEventListener('ids', this.onIds);
      OneSignal.addEventListener('opened', this.onOpened);
    }

    componentDidMount() {
      NetInfo.isConnected.fetch().then(isConnected => {
           if(!isConnected) {
             Alert.alert (
               'No hay conexion',
               'No hay conexion a internet, debe poseer una conexion WiFi o celular para usar FerretotalApp'
             );
           }
        });

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/categoria-hum?per_page=100')
        .then(response => response.json())
        .then(
            response => this.setState({ categories_hum: response})
        );

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/videoshum?per_page=100')
        .then(response => response.json())
        .then(
            response => this.setState({ videoshum: response })
        );

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/tienda_acf?per_page=100')
        .then(response => response.json())
        .then(
            response => this.setState({ tiendas: response })
        );

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/categorianovedades?per_page=100')
        .then(response => response.json())
        .then(
            response => this.setState({ categories_nov: response })
        );

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/ferretotalnovedades?per_page=100')
        .then(response => response.json())
        .then(
            response => this.setState({ novedades: response })
        );

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/promociones_activas?hola=1')
        .then(response => response.json())
        .then(
            response => this.setState({ promociones: response })
        );

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/listado_codigos_usuario?deviceID="'+DeviceInfo.getUniqueID()+'"')
        .then(response => response.json())
        .then(
          response => this.setState({ listadoCodigos: response, listadoCodigosRecibido: true})
        );

        fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/terminos_condiciones?hola=1')
        .then(response => response.json())
        .then(
          response => this.setState({ terminos: response})
        );

        AsyncStorage.getItem('usage').then((result) => {
               if(!result){
                 this.setState({usage: "firstTime"});
               }else{
                 this.setState({usage: result});
               }
               //al colocar esto hara q salga siempre el onboarding
               //AsyncStorage.removeItem("usage");
             });

             AsyncStorage.getItem('notFirst').then((result) => {
               if(!result){
                 this.setState({notFirst: false});
                } else {
                   this.setState({notFirst: false})
                  }
               });

              AsyncStorage.getItem('token').then((value) => {
               if(!value){
                 var DeviceID = DeviceInfo.getUniqueID();
                 fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/recibir_token?deviceID="'+DeviceID+'"')
                 .then((response) => response.json())
                 .then((response) => {
                   if(response[0]){
                     AsyncStorage.setItem('token',response[0].access_token);
                     this.setState({token: response[0].access_token});
                   }
                 })
               } else {
                 this.setState({token: value})}
             });
             AsyncStorage.setItem('newCode',"false");
    }

    componentWillUnmount() {
      OneSignal.removeEventListener('ids', this.onIds);
      OneSignal.removeEventListener('opened', this.onOpened);
    }

    changeUsage(e) {
      this.setState({usage: "notFirst"});
      this.setState({notFirst: true});
    }

    render(){
      /*alert(this.state.categories_hum.length + " " + this.state.videoshum.length + " " + this.state.promociones.length
      + " " + this.state.novedades.length + " " + this.state.categories_nov.length + " " + this.state.tiendas.length + " " + this.state.listadoCodigosRecibido + " " + this.state.terminos.length) */

          if(this.state.categories_hum.length && this.state.videoshum.length && this.state.promociones.length
          && this.state.novedades.length && this.state.categories_nov.length && this.state.tiendas.length && this.state.listadoCodigosRecibido && this.state.terminos.length) {
             if(this.state.usage.length && this.state.usage == "firstTime"){
               //al colocar esto solo saldra el onboarding la primera vez
               AsyncStorage.setItem('usage', "notFirst");
               AsyncStorage.setItem('notFirst', true)
               //al colocar esto, guardara la fecha de instalacion de la aplicacion (realmente la primera vez que se mete)

                AsyncStorage.getItem('installed').then((result) => {
                if(!result) {
                  var date = new Date();
                  date = date.toString();
                  AsyncStorage.setItem('installed', date);
                }
              });

               return (
                  <OnBoarding changeUsage={this.changeUsage} terminos={this.state.terminos}/>
               );
             } else if(this.state.usage == "notFirst" && this.state.notFirst == false) {
               return(
                <OnBoarding changeUsage={this.changeUsage} terminos={this.state.terminos} notFirst={true}/>
               );
            } else if(this.state.usage == "notFirst" && this.state.notFirst) {
                    return (
                    <View style={{flex:1}}>
                        <Router
                            categories_hum={this.state.categories_hum}
                            videoshum={this.state.videoshum}
                            categories_nov={this.state.categories_nov}
                            novedades={this.state.novedades}
                            tiendas={this.state.tiendas}
                            listadoCodigos={this.state.listadoCodigos}
                            promociones={this.state.promociones}
                            token={this.state.token}
                            terminos={this.state.terminos}
                        />
                    </View>
                );
              }
          } else{
            return (
                <Loading/>
            )
        }
    }
}

export default App;

As you can see, I'm fetching all the data I need in the "ComponentDidMount" method, then I store the JSON data in multiple states and pass it to the screens I need, the thing is that in release mode, the states don't have anything after it "loads" and it only happens the first time you open the app and only in release mode, I check the response from fetch and it is ok, it brings the data. I have tried lot of things but I can't still figured out what it is since it works well in debug mode. Please if you have any ideas, you can tell me.

Answer 1

were you able to solve this issue?? i'm facing same issue. your help would be really appreciated.

Answer 2

From the description , it seems the task is not being synchronous with expected behavior. setState is asynchronous by default but in my experience I have known some cases where I have to make it explicitly asynchronous using "Async" and "await". I am not sure but It might be a work around for you too in every setState invoking methods as belows:

  async changeUsage(e) {
  await this.setState({usage: "notFirst"});
  await this.setState({notFirst: true});
}