Firebase 僅在第二次或第三次嘗試時獲取數據

Question

我正在使用 React 和 Firestore 構建應用程序。

在一個功能中，我需要使用一些特定的用戶數據來查詢另一個集合中的數據，並將其顯示在應用程序上。

具體來說，我想使用返回數組的 users.books 來查詢收藏書籍。

但是，出於某種原因，users.books 不會在第一次渲染時加載。 通常需要 2-3 次渲染才能獲取 books.user 數據。 盡管立即加載了 currentUserUID。

我已經嘗試使用加載 state，如如何在繼續之前等待 Firebase 數據被獲取？ ，但無濟於事。

我需要使用 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>
    );
    }
  };

Answer 1

因此值得注意的是，您的setX方法可能會或可能不會按照代碼中的順序完成。 因此，即使userBookTitles是一個空數組，也可能會進行booksRef調用。 這可以解釋為什么您沒有獲得任何加載數據。

您在第一次useEffect中設置了userBookTitles ，而我看到您正在使用它的唯一其他地方是在您的booksRef調用中。 一個簡單的解決方法是將booksRef簡單地移動到第一個useEffect的else語句中，然后簡單地將userBookTitles傳遞到那里。 如果我理解正確的話，這應該有助於解決您的問題。