【问题标题】：React - Firestore - async get data and log it outside the async functionReact - Firestore - 异步获取数据并将其记录在异步函数之外
【发布时间】：2020-09-08 19:09:13
【问题描述】：

我正在尝试从 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>
  );
};

【问题讨论】：

异步函数总是返回一个承诺。函数的调用者需要通过等待它或通过调用then 来处理该承诺，以便获取其中的数据。

标签： javascript reactjs firebase async-await

【解决方案1】：

你放弃了await 你的async 函数。应该是这样的：

const userDetails = await userData();

【讨论】：

【解决方案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>
  );
};

我阅读异步/等待的文章 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

帮了我很多忙

【讨论】：