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

帮了我很多忙