1
votes

React Native AsyncStorage cesse de fonctionner une fois que l'application est hors ligne

J'ai une application relativement simple (ma première) qui a besoin d'afficher des informations récupérées à partir d'une requête GraphQL, puis stockées dans AsyncStorage. Tout fonctionne correctement jusqu'à ce que vous désactiviez les connexions de données / Wifi et que vous relanciez l'application - elle ne chargera pas les mêmes données locales que lorsque le réseau est activé. C'est la même chose sur un appareil Android physique ou émulé.

Il n'y a pas d'appels de données sauf lorsque l'utilisateur définit initialement ses détails. L'application est conçue avec la version 2.7.1 d'Expo & AWS Amplify. J'ai perdu plusieurs jours avec ce dernier numéro et j'ai eu le même comportement avec Expo SecureStore et Amplify Cache et je déteste suivre la voie de l'apprentissage et d'inclure Redux sur une application aussi simple ...

//import from react native not react
import { AsyncStorage } from 'react-native'

//calling a function as app loads
componentDidMount() {
    this._loadInitialState();
}

//retrieving String from AsyncStorage
_loadInitialState = async () => {
    try {
        const policyNum = await AsyncStorage.getItem('policyNum')
        //...
    } catch {
        //...
    }

//setting state
if (policyNum != null && policyNum != undefined) {
        this.setState({ policyNum: policyNum })
    //...
}

//the original setting of the item
setPolicyDetails = async () => {
    if (this.state.policyNum != null) {
        const policyNumber = this.state.policyNum
        this.state.policyNumSet = true
        try {
            await AsyncStorage.setItem('policyNum', policyNumber)
        } catch (err) { 
        //...
        }
    }
}

android react-native expo asyncstorage

4 commentaires

Vous modifiez clairement l'état avec la ligne this.state.policyNumSet = true , vous devriez plutôt utiliser this.setState ({policyNumSet: true}) .

Merci Andrew, je pensais avoir mis à jour toutes ces erreurs de noob précoces ... Je vais vérifier pour plus de restes et essayer.

Malheureusement, cela ne semble pas être le problème

Je ne pensais pas que ce serait le problème. C'était juste une erreur de codage que je signalais.

3 Réponses :

0
votes

Vous utilisez mal le fait de changer l'état.

Où vous faites ceci:

    this.setState({ policyNumSet: true })

Vous devriez changer l'état avec la fonction setState () comme ceci :

    this.state.policyNumSet = true

3 commentaires

Merci, c'était un reste du moment où j'ai commencé à apprendre React Native à partir d'une mauvaise vidéo Youtube. J'ai réalisé l'erreur et mis à jour tous les changements d'état sauf celui-ci. J'espère que c'est ça ...

Faites-moi savoir si ce n'est pas le cas

Malheureusement non

-1
votes

Stockez-vous une chaîne? asyncstorage ne peut stocker que des chaînes. essayez d'utiliser JSON.stringify et JSON.parse

_loadInitialState = async () => {
    try {
        var policyNum = await AsyncStorage.getItem('policyNum')
        policyNum = JSON.parse(policyNum) // converting to original
        //...
    } catch {
        //...
    }

//setting state
if (policyNum != null && policyNum != undefined) {
        this.setState({ policyNum: policyNum })
    //...
}

//the original setting of the item
setPolicyDetails = async () => {
    if (this.state.policyNum != null) {
        const policyNumber = this.state.policyNum
        this.setState({ policyNumSet: true })
        try {
            var policyNumberString = JSON.stringify(policyNumber)
            await AsyncStorage.setItem('policyNum', policyNumberString) //converting to string
        } catch (err) { 
        //...
        }
    }
}

4 commentaires

ValdaXD - Merci, oui, c'est une chaîne et j'ai stringifié un résultat de requête GraphQL en JSON et je les ai récupérés avec succès et je les ai affichés au redémarrage. Il ne parvient à récupérer quoi que ce soit lorsque le réseau est désactivé

C'est vraiment, vraiment étrange, car asyncstorage devrait fonctionner hors ligne. Essayez l'autre solution, si cela ne fonctionne pas, supprimez chaque appel api / fetch au démarrage et démarrez l'application en ligne, si les données se chargent, c'est un bogue, si les données ne se chargent pas, cela signifie qu'elles n'ont jamais été là et vous devriez console.log the policyNum que vous récupérez

C'est bizarre, mais j'ai rencontré plusieurs rapports de bogues sur AsyncStorage ne fonctionnant pas, mais pas que cela fonctionne avec une connexion et pas hors ligne. L'application ne fait une demande d'API que sur une interaction de l'utilisateur (ils soumettent leur code). Lorsque l'application se charge, elle recherche uniquement AsyncStorage, puis définit les états d'affichage des informations sur l'écran d'accueil. S'ils choisissent de mettre à jour leur code, une nouvelle demande est envoyée et enregistrée

Merci ValaXD! J'ai jeté un autre coup d'œil et il y a une api vérifiant les informations utilisateur qui ne fonctionnent pas hors ligne à partir d'un jeton comme je le pensais au départ, mais interroge un service.

0
votes

C'était un conflit avec une API externe

0 commentaires