# #javascript #reactjs #firebase #google-cloud-firestore #array-map
Вопрос:
Я пытаюсь отобразить массив в react, но это не работает.Как я могу отобразить элемент.Он показывает ошибку типа: Не удается прочитать свойства неопределенного (чтение «карты») Заранее спасибо
Вот мой код
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}) =gt; { const [realPost, loading, error] = useCollection( db.collection("posts").orderBy("timestamp","desc") ); const [data, setData] = useState([]); useEffect(() =gt; { realPost?.docs.map((ele,index)=gt;{ ele.data().postImages.map((urls,i)=gt;{ urls[i].map((url,j)=gt;{ 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/Screenshot (4).png?alt=mediaamp;token=7c4bfce4-3c67-4ddf-ab2e-ac884cef3393" 1 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts/Screenshot (3).png?alt=mediaamp;token=f36a86f2-0fa0-44ae-b85f-86cc5d8da7d0" 2 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts/Screenshot (1).png?alt=mediaamp;token=155761cd-9f2d-4c63-b5c7-c66ec366d721" timestamp "2021/10/31 1:00:00 PM" userId 38 Ошибка в том, что **
realPost?.docs.map((ele,index)=gt;{ 26 | ele.data().postImages.map((urls,i)=gt;{ gt; 27 | urls[i].map((url,j)=gt;{ | ^ 28 | console.log("index" j); 29 | console.log("image" url) 30 | }) Я понимаю это
{url: Array(3)}url: (3) ['https://firebasestorage.googleapis.com/v0/b/facebo…=mediaamp;token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956', 'https://firebasestorage.googleapis.com/v0/b/facebo…=mediaamp;token=ca1ad6fb-f68e-4452-a556-7a31d426ca8c', 'https://firebasestorage.googleapis.com/v0/b/facebo…=mediaamp;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…=mediaamp;token=a4d35c35-046b-448d-86a3-da5826658e54', 'https://firebasestorage.googleapis.com/v0/b/facebo…=mediaamp;token=26f4413e-4d5c-407e-9db5-c581e41758f6', 'https://firebasestorage.googleapis.com/v0/b/facebo…=mediaamp;token=9365b619-aae9-4012-bd85-9d6eb6bb2320'][[Prototype]]: Object 11:24:46.061 Posts.js:28 break когда я выполню
realPost?.docs.map((ele,index)=gt;{ ele.data().postImages.map((urls,i)=gt;{ console.log(urls) console.log("break") }) }) Я понимаю это
[ { "url": [ "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts/Screenshot (4).png?alt=mediaamp;token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956", "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts/Screenshot (3).png?alt=mediaamp;token=ca1ad6fb-f68e-4452-a556-7a31d426ca8c", "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts/Screenshot (4).png?alt=mediaamp;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/Screenshot (4).png?alt=mediaamp;token=a4d35c35-046b-448d-86a3-da5826658e54", "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts/Screenshot (3).png?alt=mediaamp;token=26f4413e-4d5c-407e-9db5-c581e41758f6", "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts/Screenshot (4).png?alt=mediaamp;token=9365b619-aae9-4012-bd85-9d6eb6bb2320" ] } ] когда я изменил свой код на
realPost?.docs.map((ele,index)=gt;{ console.log(JSON.stringify(ele.data().postImages, null, 2)) }) **
Комментарии:
1. В чем именно заключается проблема? К чему привел ваш эффект в качестве результата? Вашу структуру данных с трудом можно прочитать!
2. @tmarwen Я хочу отобразить массив URL-адресов…
Ответ №1:
TypeError: Cannot read properties of undefined (reading 'map') , эта ошибка возникает при попытке использовать map метод для объекта, не являющегося массивом. Глядя на структуру данных и сопоставление вашего postImages экземпляра, вы, вероятно, захотите сопоставить элементы массива url . Сначала вы должны нажать на url свойство, которое содержит массив, затем вы можете отобразить этот массив, как показано ниже:
realPost?.docs.map((ele,index)=gt;{ ele.data().postImages.map((urls,i)=gt;{ urls.url.map((url_,j)=gt;{ console.log("index" j); console.log("image" url_) //Changed URL to url_ to avoid name clashes. }) Обратите внимание, что вы ничего не возвращаете из map функции, то есть вы возвращаете массив undefined , однако я предполагаю, что вы в настоящее время тестируете и что-то вычислите и вернете, как только ваша проблема будет устранена.