时间戳

首页 > 解决方案 > 反应中的数组映射

javascript - 反应中的数组映射

问题描述

我正在尝试在反应中映射数组，但它不起作用。我如何映射元素。它显示TypeError: Cannot read properties of undefined (reading 'map') 提前致谢

这是我的代码

import {useCollection} from "react-firebase-hooks/firestore";
import {db,storage} from "../firebases";
import {useState,useEffect} from 'react';
import Post from "./Post";

const Posts = ({posts,myId}) => {
  
 const [realPost, loading, error] = useCollection(
   db.collection("posts").orderBy("timestamp","desc")
 );

  const [data, setData] = useState([]);

  useEffect(() => {
    

   realPost?.docs.map((ele,index)=>{
ele.data().postImages.map((urls,i)=>{
    urls[i].map((url,j)=>{
        console.log("index" + j);
    console.log("image"+url)
    })
    
})  
})

  },[])

这是firebase firestore中的数据结构

  postImage
    0
    url
    0 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=7c4bfce4-3c67-4ddf-ab2e-ac884cef3393"
    1 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(3).png?alt=media&token=f36a86f2-0fa0-44ae-b85f-86cc5d8da7d0"
    2 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(1).png?alt=media&token=155761cd-9f2d-4c63-b5c7-c66ec366d721"
    timestamp "2021/10/31 1:00:00 PM"
    userId    38

错误是**

realPost?.docs.map((ele,index)=>{
  26 |  ele.data().postImages.map((urls,i)=>{
> 27 |      urls[i].map((url,j)=>{
     |             ^
  28 |          console.log("index" + j);
  29 |      console.log("image"+url)
  30 |      })

我明白了

{url: Array(3)}url: (3) ['https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=ca1ad6fb-f68e-4452-a556-7a31d426ca8c', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956'][[Prototype]]: Object
11:24:46.053 Posts.js:28
 break
11:24:46.059 Posts.js:27 {url: Array(3)}url: (3) ['https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=a4d35c35-046b-448d-86a3-da5826658e54', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=26f4413e-4d5c-407e-9db5-c581e41758f6', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=9365b619-aae9-4012-bd85-9d6eb6bb2320'][[Prototype]]: Object
11:24:46.061 Posts.js:28
 break

当我执行

realPost?.docs.map((ele,index)=>{
    ele.data().postImages.map((urls,i)=>{
        console.log(urls)
        console.log("break")
        })
        
    })

我明白了

 [
  {
    "url": [
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(3).png?alt=media&token=ca1ad6fb-f68e-4452-a556-7a31d426ca8c",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956"
    ]
  }
]
11:31:42.232 Posts.js:26 [
  {
    "url": [
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=a4d35c35-046b-448d-86a3-da5826658e54",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(3).png?alt=media&token=26f4413e-4d5c-407e-9db5-c581e41758f6",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=9365b619-aae9-4012-bd85-9d6eb6bb2320"
    ]
  }

]

当我将代码更改为

realPost?.docs.map((ele,index)=>{
    console.log(JSON.stringify(ele.data().postImages, null, 2)) 
    })

**

标签： javascriptreactjsfirebasegoogle-cloud-firestorearray-map

解决方案

TypeError: Cannot read properties of undefined (reading 'map') ，当您尝试map在非数组对象上使用该方法时会出现此错误。查看postImages实例的数据结构和映射，您可能希望映射url. 你应该首先点击url保存数组的属性，然后你可以像下面这样映射到这个数组：

  realPost?.docs.map((ele,index)=>{
    ele.data().postImages.map((urls,i)=>{
       urls.url.map((url_,j)=>{
         console.log("index" + j);
         console.log("image"+url_) //Changed URL to url_ to avoid name clashes.
    })

请注意，您没有从map函数返回任何内容，这意味着您将返回一个 数组undefined，但是，我假设您当前正在测试，并且一旦您的问题得到解决，就会计算并返回一些东西。

推荐阅读