React Native如何获取useRef current的值

Question

I am developing a React Native application and am facing the following error:

I have defined a useRef which stores the doc ID from a firebase collection. But when I call that variable after it has been defined, the .current value returns a blank string.

db.collection('users').onSnapshot((snapshot) => {
    snapshot.docs.map((doc) => {
        if (doc.data().email === auth.currentUser?.email) {
            bidId.current = doc.id
            console.log(bidId.current)
        }
    })
})

The above code returns the expected value. However, when I call the variable outside this db.collection loop, I get the following value:

But calling the bidId.current returns a blank string.

Please can someone help me with this. Thanks!

Answer 1

Actually this is what happens:

db.collection('users').onSnapshot((snapshot) => {
    snapshot.docs.map((doc) => {
        if (doc.data().email === auth.currentUser?.email) {
            bidId.current = doc.id

            // This line gets executed after some time!
            console.log(bidId.current)
        }
    })
})

// This gets executed first! (The value has not been stored yet!)
console.log(bidId.current);

Using the "useState" hook instead of "useRef" will solve the issue. Consider the following code:

const [BidId, setBidId] = useState<string | null>(null);

// This will store the value...
useEffect(() => {
 db.collection('users').onSnapshot((snapshot) => {
    snapshot.docs.map((doc) => {
        if (doc.data().email === auth.currentUser?.email) {
            setBidId(doc.id);
        }
    })
 })
}, []);

// Here you can access the value
useEffect(() => {
 if(BidId !== null)
  console.log(BidId);
}, [BidId]);

// You can also return the component like the following:
return (<View>The Bid ID is: {BidId !== null ? BidId : "Loading..."}</View>);

Your useEffect basically says that whenever pageRef changes, call this function. If done outside, it will call do your tasks on every render instead of doing the whenever pageRef values is changed. Also, in initial renders, it may give undefined values. You can only return a function in useEffect which basically says that before running the same next time, run this function before.

Answer 2

Try (currentUser without the '?' query character):

if (doc.data().email === auth.currentUser.email) {
            bidId.current = doc.id
            console.log(bidId.current)
        }