json.filter() ne renvoie pas de résultat sans rafraîchissement manuel une fois

Question

Je crée une application de suivi des dépenses en utilisant React Native et Back4App (Parse) comme backend. Je veux récupérer tous les objets de la classe Transactions dans la base de données Parse et les filtrer par username . Les résultats sont les suivants,

Array [
  Object {
    "amount": -350,
    "objectId": "hzXdXRj8jf",
    "type": "Expense",
    "username": "james",
  },
  Object {
    "amount": -200,
    "objectId": "r2uDmSZ666",
    "type": "Expense",
    "username": "james",
  },
  Object {
    "amount": 2000,
    "objectId": "FBEGubpwNn",
    "type": "Income",
    "username": "sheldon",
  },
  Object {
    "amount": -500,
    "objectId": "oYam0dUOxu",
    "type": "Expense",
    "username": "sheldon",
  },
]

Puisque j'utilise james je veux voir les résultats avec le nom d'utilisateur james . Voici le code que j'utilise,

    const getCurrentUser = async () => {
        const user = await Parse.User.currentAsync()
        if(user !== null) {
            setUsername(user.get('username'))
        } else {
            Alert.alert("Error!", "Cannot fetch username")
        }
    }

    const readTransactions = async () => {
        setLoading(true)
        getCurrentUser()
        const parseQuery = new Parse.Query("Transactions")
        try {
            let results = await parseQuery.find()
            let json = JSON.parse(JSON.stringify(results))
            var filteredJSON = json.filter(it => it.username === username)
            console.log(filteredJSON)
            setTransactions(filteredJSON)
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            return true
        } catch (error) {
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        }
    }

    const onRefresh = () => {
        setRefresh(true)
        readTransactions()
    }

    useEffect(() => {
        isFocused && readTransactions()
    }, [isFocused])

Si je recharge l'application / que j'ouvre l'application pour la première fois, aucun résultat n'est récupéré. console.log(filteredJSON) renvoie à Array [] . Mais en rafraîchissant manuellement la liste plate, elle renvoie les bons résultats

Array []
Array [
  Object {
    "amount": -350,
    "objectId": "hzXdXRj8jf",
    "type": "Expense",
    "username": "james",
  },
  Object {
    "amount": -200,
    "objectId": "r2uDmSZ666",
    "type": "Expense",
    "username": "james",
  },
]

Donc, le problème est filteredJSON ne renvoie aucun résultat lors du redémarrage de l'application mais renvoie les résultats corrects lors d'un premier rafraîchissement. Mais évidemment, je veux retourner les données correctes lorsque l'utilisateur ouvre l'application sans rafraîchissement manuel.

Même si j'utilise parseQuery.contains('username', username) sans utiliser de filtre json, le problème persiste.

(Si je fais setTransactions(json) il récupère les bons résultats à la première occasion sans aucun rafraîchissement, mais je ne veux pas le faire puisqu'il renverra toutes les données des différents utilisateurs sous le nom de Transactions classe.)

Answer 1

Le problème est que votre getCurrentUser n'a pas été résolue au moment où vous lancez votre premier filtre. Cela donne un résultat vide, car aucune des transactions n'a un numéro d'identification de type undefined le nom d'utilisateur.

Une solution serait d'exécuter uniquement readTransactions si vous avez le nom d'utilisateur. Vous pourriez faire cela dans votre useEffect :

    useEffect(() => {
        isFocused && username && readTransactions()
    }, [isFocused, username])

Vous avez bien fait de trouver la ligne sur laquelle le problème apparaît. À l'avenir, une fois que vous aurez trouvé cette ligne, vous pourrez essayer d'enregistrer chaque partie de celle-ci - vous auriez vu que username était indéfinie.