Javascript React-Firestore-async获取数据并在异步函数外部记录

我试图从userRef获取数据，并使用它对另一个文档（例如：bikes）进行另一个异步调用，然后在页面上呈现bikes文档

现在在主屏幕函数中，userDetailslog打印{“_:0”，“_V:0”，“_W:null”，“_X:null}。我假设这是因为它在返回数据之前被触发

关于如何更好地将适当的数据打印到主屏幕上的想法

谢谢你的帮助

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>
  );
};

constuserdata=async（）=>{
const user=auth（）.currentUser；
var userRef=firestore（）.collection（'users'）.doc（user.uid）；
试一试{
var doc=await userRef.get（）；
如果（文件存在）{
console.log（doc.data（））；//打印完美
返回单据数据（）；
}否则{
console.log（'没有这样的文档！'）；
}
}捕获（错误）{
log（'获取文档时出错'，错误）；
}
};
常量主屏幕=（）=>{
const userDetails=userData（）；//
useffect（（）=>{
console.log（userDetails）；//此处不打印
}，[userDetails]）；
const navigation=useNavigation（）；
返回(
主屏幕
);
};

您放弃了

等待
您的
异步
功能。应该是这样的:

const userDetails = await userData();

更新
最后，我将useffect钩子与async/await一起使用，如下所示
为可能有类似问题的任何人发布

这就是我对下面代码所做的
我正在访问集合“用户”中的文档。从该文档检索“bikeid”，然后使用该“bikeid”从集合“bikes”访问相关的“bikedetails”文档

const主屏幕=（）=>{
const[userD，setUserD]=useState（“”）；
const[bikeID，setBikeID]=useState（“”）；
const[items，setItems]=useState（“”）；
useffect（函数effectFunction（）{
异步函数fetchUsers（）{
const user=auth（）.currentUser；
var userRef=firestore（）.collection（'users'）.doc（user.uid）；
试一试{
var doc=await userRef.get（）；
const data=wait doc.data（）；
wait setUserD（data）；//wait设置用户数据，useState
等待setBikeID（data.bikeID）；//userRef文档有一个关联的自行车id
返回数据.bikeID
}捕获（错误）{
Alert.Alert（'获取文档时出错'，错误）；
}
}
异步函数fetchBikes（bikeid）{
const bid=bikeid；
var bikeRef=firestore（）.collection（'bikes'）.doc（bid）；
试一试{
var doc=wait bikeRef.get（）；
const data=wait doc.data（）；
返回数据；
}捕获（错误）{
Alert.Alert（'获取文档时出错'，错误）；
}
}
//定义异步get（）函数的顺序-查看mozilla文章
异步函数sequentialStart（）{
log（'==顺序异步！！！！！='）；
const getUsers=await fetchUsers（）；
console.log（getUsers）；
const getBikes=wait fetchBikes（getUsers）；//使用getUsers的返回值传递给fetchBikes
console.log（getBikes）；
const site=wait setItems（getBikes）；//设置项的状态
控制台日志（项目）；
}
顺序启动（）；
}, []);
返回(
主屏幕
{items.bikeName}
);
};

我读的文章async/Wait-

帮了我很多忙
异步函数总是会返回一个承诺。函数的调用方需要使用该承诺，或者等待它，或者调用
然后
，以获取其中的数据。
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>
  );
};