Why is the variable used before it is assigned?

Question

I'm new to React Native and struggling with some code:

import 'react-native-gesture-handler'
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, Image, TextInput, ActivityIndicator } from 'react-native'
import firebase from "../utils/firebase"

const SettingsScreen = () => {

     const [isEditing, setIsEditing] = useState(false)
     const [userDataLoaded, setUserDataLoaded] = useState(false)

     const [updatedFirstName, setUpdatedFirstName] = useState("")


     const user = firebase.auth().currentUser
     let userData: firebase.firestore.DocumentSnapshot
     firebase.firestore().doc("users/" + user?.uid).get().then(user => {
          userData = user
          setUserDataLoaded(true)
     }).catch(error => {
          console.log(error.code, error.message)
     })

     function onSaveChanges() {

     }

     return (
          <View>
               {userDataLoaded ? (
                    <>
                         {/* Change Editing Permission */}
                         < Button title={isEditing ? "Save Changes" : "Edit"} onPress={() => {
                              setIsEditing(!isEditing)
                              // save changes
                              if (isEditing) onSaveChanges();
                         }} />
                         {/* First Name */}
                         <Text>User: {userData.data()}</Text>
                         <TextInput
                              editable={isEditing}
                              placeholder="First Name"
                              onChangeText={text => setUpdatedFirstName(text)}
                         // value={updatedFirstName == "" ? userData?.get("firstName") : updatedFirstName}
                         />
                    </>
               ) : (
                         <ActivityIndicator />
                    )}
          </View>
     )
}

export default SettingsScreen

I'm getting an error, because of the use of userData in the return section. It says that the variable is used before its assigned.

My understanding is that React is rendering the section, in which userData is being used in, only if the state userDataLoaded is set to true. And userDataLoaded only is set to true if userData is assigned by the data loaded from the server.

What am I doing wrong? Thanks for your support :)

`let userData: firebase.firestore.DocumentSnapshot` pretty it's just a typo. It should be an equal sign — Andrew, Aug 13 '20 at 19:38
Async. You're assigning `userData` inside the function passed to `then`. There's no way for the static analyzer to know that there's any relation between `userData` and `userDataLoaded`. — Heretic Monkey, Aug 13 '20 at 19:40
@Andrew That's how you tell TypeScript what type of data will be in `userData`. — Heretic Monkey, Aug 13 '20 at 19:41
@HereticMonkey Oh, yea I know of the TS syntax. I wasn't sure whether or not he was using TS. Didn't see it in the tag, didn't specify where the error was, and didn't see any other type declarations lol — Andrew, Aug 13 '20 at 19:46
But to answer your question Isc, you can either pull up `userData` outside of the function to its outer scope, which I personally wouldn't do, or assign `userData` using `useState` instead of using a regular variable. — Andrew, Aug 13 '20 at 19:50
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Emile Bergeron, Aug 13 '20 at 20:38
And specifically, here's [an example with React hooks](https://stackoverflow.com/q/53219113/1218980). — Emile Bergeron, Aug 13 '20 at 20:42
@EmileBergeron I am already familiar with async stuff, but new to React (Native) and somehow thought – hoped – my solution could work. But the post you linked about React Hooks helped me to get a deeper understanding of it, thank you ;) — lsc, Aug 14 '20 at 11:31

Why is the variable used before it is assigned?

0 Answers0