Firebase 仅在第二次或第三次尝试时获取数据答案

【问题标题】：Firebase only fetches data on second or third attemptFirebase 仅在第二次或第三次尝试时获取数据
【发布时间】：2021-09-27 15:46:22
【问题描述】：

我正在使用 React 和 Firestore 构建一个应用程序。

在一个功能中，我需要使用一些特定的用户数据来查询另一个集合中的数据，并将其显示在应用程序上。

具体我想用users.books，它返回一个数组，来查询收藏书籍。

但是，由于某种原因，users.books 不会在第一次渲染时加载。获取 books.user 数据通常需要 2-3 次渲染。尽管 currentUserUID 被立即加载。

我尝试使用How to wait for Firebase data to be fetched before progressing? 中指定的加载状态，但无济于事。

我需要使用 onSnapShot 方法吗？

感谢阅读

我的代码

import 'firebase/firestore'

import { booksRef} from '../../App';

const ProfileScreen = ({ navigation }) => {
  const currentUserUID = firebase.auth().currentUser.uid;
  const [firstName, setFirstName] = useState('');
  const [userBookTitles, setUserBookTitles] = useState([]);
  const [userBooks, setUserBooks] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    async function getUserInfo(){
      let doc = await firebase
      .firestore()
      .collection('users')
      .doc(currentUserUID)
      .get();
      
      if (!doc.exists){
        Alert.alert('No user data found!')
      } else {
        let dataObj = doc.data();
        setFirstName(dataObj.firstName)
        setUserBookTitles(dataObj.books)
        console.log(userBookTitles)
      }
    }
    getUserInfo();
  }, [])

  useEffect(() => {
    async function getUserBooks() {
    booksRef.where("title", "in", userBookTitles).onSnapshot(snapshot => (
    setUserBooks(snapshot.docs.map((doc) => ({id: doc.id, ...doc.data()})))
    ))
  }
  setLoading(false);
  getUserBooks()
  }, [])


      if (!loading) {
      return (
          <View style={styles.container}>
            <Text> Hi {firstName} </Text>
            <TouchableOpacity onPress={handlePress}>
            
              <Text> Log out </Text>
            </TouchableOpacity>
            <Row
                    books={userBooks}
            />
          </View>
      );  
    } else { 
      return (
        <View style={styles.container}>
          <Text> Test </Text>
        </View>
    );
    }
  };

【问题讨论】：

我认为你应该在 setLoading 之前调用 getUsersBooks 函数。
不幸的是没有区别

标签： javascript reactjs firebase react-native google-cloud-firestore

【解决方案1】：

因此值得注意的是，您的setX 方法可能会或可能不会按照您在代码中的顺序完成。因此，即使userBookTitles 是一个空数组，您的booksRef 调用也可能会进行。这可以解释为什么您在加载时没有收到任何数据。

您在第一个useEffect 中设置userBookTitles，而我看到您使用它的唯一其他地方是在您的booksRef 调用中。一个简单的解决方法是将booksRef 简单地移动到第一个useEffect 的else 语句中，然后将userBookTitles 传递给那里。如果我理解正确，这应该有助于解决您的问题。

【讨论】：