如何從firestore映射一組物件？

這已經讓我發瘋了好幾個星期了。我是新來的反應本機和火庫的人。我正在嘗試映射從 Firestore 獲取的一組物件。

這是我的提要頁面代碼：

const Feed = () => {
  const navigate = useNavigation()
  const handleAddBuddy = () => {
    navigate.replace("AddBuddy")
  } 

  const [buddyList, setBuddyList] = useState([])
  
  console.log(buddyList)

  useEffect( async () =>{
    const myCol= collection(db,"Users", auth.currentUser.uid, "BuddyList")
    const querySnapshot = await getDocs(myCol)
    const unsub = querySnapshot.forEach((doc) =>{
        setBuddyList(doc.data())
    })
    return unsub

  }, [])


  return (

    <SafeAreaView style={styles.container}>
  {
    buddyList.map(({FirstName}) => (
      <FeedCard name={FirstName} />        
      ))
  }

我正在嘗試渲染 Feedcard 組件并將道具“名稱”作為 Firebase 的“名字”傳遞。

我嘗試使用平面串列對其進行映射，幾乎所有我能在網上找到的東西，但我總是從 JSX 中得到錯誤。使用此代碼，我收到錯誤“未定義不是函式”

我相信我已成功從 firebase 獲取資料，因為這是我在控制臺中得到的 - 這些都是添加到“buddylist”的所有檔案，檔案本身在集合“BuddyList”下有一個自動生成的 ID

Object {
  "FirstName": "Joslin",
}
Object {
  "FirstName": "Vanessa",
}
Object {
  "FirstName": "Kai",
}
Object {
  "FirstName": "Dad",
}
Object {
  "FirstName": "Mom",
}
Object {
  "FirstName": "Joslin",
}

這是控制臺中顯示的完整錯誤 - 如果有幫助，feed.js 是嵌套在 TabNavigator.js 中的底部標簽導航器頁面......而 TabNavigator.js 是嵌套在 app.js 中的堆疊導航器螢屏（我使用堆疊螢屏主應用程式 UI 的注冊/登錄程序和底部選項卡）

    TypeError: undefined is not a function (near '...buddyList.map...')

This error is located at:
    in Feed (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by BottomNavigationRouteScreen)
    in BottomNavigationRouteScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by BottomNavigation)
    in BottomNavigation
    in ThemedComponent (created by withTheme(BottomNavigation))
    in withTheme(BottomNavigation) (created by MaterialBottomTabViewInner)
    in MaterialBottomTabViewInner (created by MaterialBottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by MaterialBottomTabView)
    in MaterialBottomTabView (created by MaterialBottomTabNavigator)
    in Unknown (created by MaterialBottomTabNavigator)
    in MaterialBottomTabNavigator (created by TabNavigator)
    in TabNavigator (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

任何幫助，將不勝感激。我已經被困在這個問題上太久了，我已經準備好繼續前進了..

uj5u.com熱心網友回復：

您沒有QuerySnapshot正確處理。回傳的檔案在docs快照的屬性中。此外，您將每個回傳的檔案分配給 buddyList 狀態變數，這會將其轉換為物件而不是陣列。

這

const unsub = querySnapshot.forEach((doc) =>{
  setBuddyList(doc.data())
})

應該

// Get the returned documents with their data in a new array 
const buddies = querySnapshot.docs.map(doc => doc.data())

// Assign that array to buddyList
setBuddyList(buddies)

uj5u.com熱心網友回復：

人！

你能從你的控制臺列印出確切的錯誤嗎？

標籤：javascript 火力基地 反应式 谷歌云火库 jsx

上一篇：Matlabs函式梯度是否必要？

下一篇：TS為什么我不在Promise中設定陣列？