firebase 我尝试从firestore的一个数组中渲染元素，但是什么也没发生？

iovurdzv 于 2023-02-13 发布在其他

关注(0)|答案(2)|浏览(110)

import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import {collection, getDocs, doc} from "firebase/firestore"
import {db} from "../firebaseConfig/firebase"
import React, { useState, useEffect } from "react";

const Cards = () =>{

    const [products, setProducts] = useState([])
    const productsCollection = collection (db,"zproducts")
    const getProducts = async ()=>
    {
    const data = await getDocs (productsCollection)

    setProducts(data.docs.map((doc)=>({...doc.data(),id:doc.id})))

    }

    console.log(products)

    useEffect(() => {
        getProducts();
      }, []);

    return(
        <>
        {products.map((product)=> {
            <div key={product.id}>
            <p>{product.name}</p>
            </div>
        })}
            <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="holder.js/100px180" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
</>
        )
    }
export default Cards

好的，当我尝试创建一个p标记渲染www.example.com时product.name，它没有渲染，它应该渲染在引导卡旁边，但由于某种原因什么也没有发生。
When I do a console log the array from firestore does appear, but if I do for example console.log(products.name) I get undefined as a result on console

firebase

来源：https://stackoverflow.com/questions/75427561/i-try-to-render-elements-from-an-array-from-firestore-but-nothing-happens

2条答案

按热度按时间

bvjveswy1#

我想你忘了Map上的回报：

{products.map((product) => {
   return <div key={product.id}>
               <p>{product.name}</p>
              </div>
    })}

您还可以：

{products.map((product) => (
    <div key={product.id}>
       <p>{product.name}</p>
     </div>
 ))}

赞(0）回复(0）举报 2023-02-13

brccelvz2#

问题是FirestoregetDocs()结果没有.map方法。我遇到了同样的问题，最终使用.forEach方法：

- 而不是：**

const data = await getDocs (productsCollection)
setProducts(data.docs.map((doc)=>({...doc.data(),id:doc.id})))

- 使用此选项：**

const querySnapshot = await getDocs (productsCollection)

let data = [];

querySnapshot.forEach((doc: any) => {
  data.push({ ...doc.data(), id: doc.id });
});

setProducts(data);

- 旧答案**

(This对于在输出DOM React.map迭代器上设置undefined键的人来说仍然是相关的。）
根据您的屏幕截图，您的任何对象中似乎都没有设置id属性。如果没有id，则此部分可能存在渲染问题，因为您的key是undefined。

赞(0）回复(0）举报 2023-02-13

我来回答

firebase 我尝试从firestore的一个数组中渲染元素，但是什么也没发生？

2条答案

相关问题

热门标签

最新问答