React - Firestore - 異步獲取數據並將其記錄在異步函數之外

Question

我正在嘗試從 userRef 獲取數據並使用它對另一個文檔（例如：自行車）進行另一個異步調用，然后在頁面上呈現該自行車文檔

現在在主屏幕功能中，userDetailslog 打印 {"_U": 0, "_V": 0, "_W": null, "_X": null}。 我假設這是因為它在返回數據之前被觸發。

關於如何更好地構建以將適當的數據打印到 HomeScreen 的想法？

任何幫助表示贊賞

const userData = async () => {
  const user = auth().currentUser;
  var userRef = firestore().collection('users').doc(user.uid);

  try {
    var doc = await userRef.get();
    if (doc.exists) {
      console.log(doc.data()); // Prints Perfectly
      return doc.data();
    } else {
      console.log('No such document!');
    }
  } catch (error) {
    console.log('Error getting document:', error);
  }
};

const HomeScreen = () => {
  const userDetails = userData(); // 

  useEffect(() => {
    console.log(userDetails); // Doesn't print here
  }, [userDetails]);

  const navigation = useNavigation();


  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="logout" onPress={logout} />
    </View>
  );
};

Answer 1

您忘記await您的async功能。 應該是這樣的：

const userDetails = await userData();

Answer 2

更新

我最終使用了帶有 async/await 的 useEffect 鈎子，如下所示為可能有類似問題的任何人發帖

這就是我正在用下面的代碼做的事情

我正在訪問“用戶”集合中的文檔。 從該文檔中檢索“bikeid”，然后使用該“bikeid”從集合“bikes”中訪問相關的“bikedetails”文檔

const HomeScreen = () => {
  const [userD, setUserD] = useState('');
  const [bikeID, setBikeID] = useState('');
  const [items, setItems] = useState('');

  useEffect(function effectFunction() {
    async function fetchUsers() {
      const user = auth().currentUser;
      var userRef = firestore().collection('users').doc(user.uid);
      try {
        var doc = await userRef.get();
        const data = await doc.data();
        await setUserD(data); // await to set user data, useState 
        await setBikeID(data.bikeID); // userRef doc has an associated bike id
        return data.bikeID
      } catch (error) {
        Alert.alert('Error getting document:', error);
      }
    }

    async function fetchBikes(bikeid) {
      const bid = bikeid;
      var bikeRef = firestore().collection('bikes').doc(bid);
      try {
        var doc = await bikeRef.get();
        const data = await doc.data();
        return data;
      } catch (error) {
        Alert.alert('Error getting document:', error);
      }
    }

// Defining what sequence of the async get() functions - check out mozilla article
    async function sequentialStart() {
      console.log('==SEQUENTIAL ASYNCS!!!!! ==');

      const getUsers = await fetchUsers();
      console.log(getUsers);

      const getBikes = await fetchBikes(getUsers); // using return value from getUsers to be passed into fetchBikes
      console.log(getBikes);

      const site = await setItems(getBikes); // setting state of items
      console.log(items);

    }

    sequentialStart();
  }, []);

  return (
    <View>
      <Text>Home Screen</Text>

      <Text>{items.bikeName}</Text>

      <Button title="logout" onPress={logout} />
    </View>
  );
};

我閱讀的文章 async/await - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

幫了我很多忙