Question 35473 in React native Question posted in
The official React Native documentation can be found here.

json.filter() doesn't return any result without manually refreshing once – React native

I am making an expense tracker app using React Native and Back4App (Parse) as backend. I want to fetch all objects under class Transactions in the Parse database and filter them by username. The results are like these,

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",
  },
]

Since, I am using james account, I want to see results with username james. This the code I use,

    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])

If I reload the app / open the app for first time, it doesn’t fetch any results i.e. console.log(filteredJSON) returns Array [].
But upon manually refreshing the flatlist, it returns the correct results

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

So, the problem is filteredJSON doesn’t return any result upon restarting the app but it returns the correct results on refreshing once. But obviously, I want to return the correct data when the user opens the app without manually refreshing.

Even if I use parseQuery.contains('username', username) without using any json filter, the problem still persists.

(If I do setTransactions(json) it fetches the correct results at first chance without any refreshing, but I don’t want to do that since it will return all data of various users under Transactions class.)

Tags:

2

Answers


  1. 0

    The issue is that your getCurrentUser request hasn’t resolved by the time you run your first filter. This causes an empty result, since none of the transactions have an undefined username.

    One solution would be to only run readTransactions if you have the username. You could do this in your useEffect:

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

    You did well in finding the line that the issue appears on. In the future, once you find that line, you can try logging out each part of it – you would have seen that username was undefined.

    Login or Signup to reply.
  2. 0

    If you want to filter currentUser.

    Before, You should set acl these records.

    You can do it new ACL() and set req.User.id while saving data…

    And if you run any query, automatically currentUser filtered these queries, so returned related to these user’s transactions.

    But If you don`t want to this way. If you want to find every users transactions.

    You can filter this way.

    const result = [Your query.]
let cUserData=[]

result.forEach(x=>x.get('user').id ===currentUser.id? cUserData.push(x):null)

    I hope this is helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search