从firebase集合中捕获数据,并使其可用?

lymnna71  于 2023-01-09  发布在  其他
关注(0)|答案(2)|浏览(81)

我在firebase中有一个名为polls的集合,这个集合是一个数组,在数组中我有4个url(url_a,url_b,url_c和url_d),我想在react应用中把这些url从数组中拉出来,这样我就可以用它们作为4个不同图片的src。
我知道因为“polls”是一个数组,我不能通过设置一些变量“polls.data.url_a”直接拉取url.使用下面代码中的第二个useEffect函数,我可以使用forEach来console.log数组和其中的数据.我可以console.log poll.data,甚至poll.data.url_a,它会返回正确的结果.
但是我被困在如何摆脱forEach,并实际捕获各个URL,以便我可以将它们分配给一个变量,这样我就可以使用它们。

import { useEffect, useState } from "react"
import { collection, getDocs } from "firebase/firestore"
import { db } from '../firebase.config'

function Food() {
  const [polls, setPolls] = useState([])

  useEffect(() => {
    getPolls()
  }, [])

 ** useEffect(() => {
    polls.forEach((poll) => 
    console.log(poll.data.url_a))
}, [polls])
**
function getPolls() {

    const pollsRef = collection(db, 'polls');
    
   getDocs(pollsRef).then(response => {
      const poll = response.docs.map(doc => ({data: doc.data(), id: doc.id}))
      setPolls(poll)
    }).catch(error => console.log(error.message))
  
  }
  
  return (
    <div>
      Food
    </div>
  )
}

export default Food

我试过在forEach中设置一个变量,稍后再调用它,然后在函数中运行一个forEach。但是我只是不知道如何以一种可用的方式访问URL,除了控制台记录它之外。任何帮助都将非常感谢,谢谢!

6g8kf2rb

6g8kf2rb1#

看看Renaud在这里建议了什么,看看如何给变量赋值:Get Firebase Collection into simple array
如果我理解了您的问题,您将需要poll常量来指向全局存储变量或在模板部分中引用它。

yvfmudvl

yvfmudvl2#

如果提取的数据结构如下:

const polls = [{
  data: {
    url_a: "url a",
    url_b: "url b"
  }
}]

将其赋值给object状态变量比赋值给array更容易。

const [polls, setPolls] = useState({})
// ...
useEffect(() => {
  getPolls()
}, [polls])

function getPolls() {

  const pollsRef = collection(db, 'polls');

  getDocs(pollsRef).then(response => {
    const polls = response.docs.map(doc => ({data: doc.data(), id: doc.id}))
    polls.map(poll => setPolls(poll.data))
  }).catch(error => console.log(error.message))
}
// ...
  return <img src={polls.url_a} alt="" />

相关问题