如何在React中提取Firebase polls集合内的URL并复用？

核心思路是利用React的状态驱动渲染特性，直接在组件的返回值中遍历polls数组，取出每个文档中的URL并渲染图片，无需额外通过useEffect捕获变量。

具体实现方案 #

1. 移除用于调试打印的第二个useEffect（非必需）
2. 在组件的返回值中，通过map遍历polls数组，为每个文档生成对应的四张图片

修改后的完整代码：

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

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

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

  function getPolls() {
    const pollsRef = collection(db, 'polls');
    getDocs(pollsRef)
      .then(response => {
        const pollData = response.docs.map(doc => ({ data: doc.data(), id: doc.id }))
        setPolls(pollData)
      })
      .catch(error => console.log(error.message))
  }
  
  return (
    <div className="poll-container">
      {/* 遍历每个poll文档，用id作为唯一key */}
      {polls.map(poll => (
        <div key={poll.id} className="poll-item">
          <img src={poll.data.url_a} alt="选项A" />
          <img src={poll.data.url_b} alt="选项B" />
          <img src={poll.data.url_c} alt="选项C" />
          <img src={poll.data.url_d} alt="选项D" />
        </div>
      ))}
    </div>
  )
}

export default Food

额外说明 #

• 使用map而非forEach的原因：map会返回新数组，可直接嵌入JSX生成元素；forEach仅作遍历无返回值，无法用于渲染逻辑。
• 若需将所有URL整理为独立数组供其他逻辑复用，可通过useMemo缓存处理结果，避免重复计算：

import { useEffect, useState, useMemo } from "react"
// ...其他导入保持不变

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

  // 整理所有URL到一个扁平化数组
  const allImageUrls = useMemo(() => {
    return polls.flatMap(poll => [
      poll.data.url_a,
      poll.data.url_b,
      poll.data.url_c,
      poll.data.url_d
    ])
  }, [polls])

  // ...getPolls和useEffect部分不变

  return (
    <div>
      {allImageUrls.map((url, index) => (
        <img key={index} src={url} alt={`图片${index+1}`} />
      ))}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者m_h9