如何从firestore映射一组对象？答案

【问题标题】：How to map an array of objects from firestore?如何从firestore映射一组对象？
【发布时间】：2022-08-04 09:11:05
【问题描述】：

这已经让我发疯了好几个星期了.. 我是反应原生和 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 中得到错误。使用此代码，我收到错误“未定义不是函数”

我相信我已成功从 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 中的堆栈导航器屏幕（我使用堆栈屏幕进行注册/登录过程，底部标签用于主应用程序界面）

    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

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

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

【解决方案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)

【讨论】：

【解决方案2】：

useEffect( async () =>{
    const myCol= collection(db,"Users", auth.currentUser.uid, "BuddyList")
    const querySnapshot = await getDocs(myCol)
    setBuddyList(querySnapshot.docs.map((doc)=> ({...doc.data(), id: 
     doc.id})));
    return unsub;
  }, [])

【讨论】：