如何映射来自 firestore 的对象数组？

Question

这几个星期以来一直让我发疯.. 我是新手，无法对本机和 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 组件并将道具 'name' 作为来自 Firebase 的 'FirstName' 传递。

我已经尝试使用平面列表映射它，几乎所有我在网上都能找到的东西，但我总是从 JSX 中得到错误。使用此代码我收到错误消息“undefined is not a function”

我相信我已成功从 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... =29=] 主应用程序的进程和底部标签 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

如有任何帮助，我们将不胜感激。我已经坚持这个太久了，我已经准备好继续前进了..

Answer 1

您没有正确处理 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)

如何映射来自 firestore 的对象数组？

How to map an array of objects from firestore?

javascript

jsx

firebase

react-native

google-cloud-firestore