如何动态地将图像元素添加到我的页面？答案

【问题标题】：How can I add image elements to my page dynamically?如何动态地将图像元素添加到我的页面？
【发布时间】：2021-07-15 15:14:15
【问题描述】：

我的 React 应用已连接到 Firebase Firestore 和 Storage，但我无法从 Storage 读取文件并显示它们。

在某一时刻，我有以下数据数组：

metricData = [

  "2021-07-15" = { id1: "/image1url", id2: "/image2url", ... },
  "2021-07-14" = { id2: "/image2url", ... },
  ...

]

其中“id1”等是各种指标的 Firebase Id，每个指标的值（例如“/image1.url”）是存储在我的 Firebase 存储中的图像的路径。

然后我有一个我想查看的 id 数组：

metricIds = [ id1, id2, ..., idx ]

所以，我想遍历 metricIds，对于其中的每个 id，我想查看 metricData 中今天（2021-07-15）的记录，并获取与该 id 关联的 url。然后我想读入关联的图像，并显示它。

我在渲染图像时遇到了问题，因为当我从 Firebase 获取它们时，React 已经继续前进并且不会渲染它们。

到目前为止，我有以下内容（为了清楚起见，我已经删除了所有错误检查）：

const MetricImages = (metricIds, metricData) => {

  const firebase = useContext(FirebaseContext)
  const today = new Date()

  return (
    <>
      {
        metricIds.map((metricId) => {
          // Get image url
          const url = metricData[moment(today).format('YYYY-MM-DD')][metricId]
          // Now get image at that url from Firebase storage
          firebase
          .doGetFile(url)
          .then((resImage:string) => {
            // resImage should now contain the relevant image, so we want to display it
          })
        })
      }
    </>
            

export default MetricImages

问题是，我应该把 map 语句的 return 放在哪里，并返回一个 image 元素？我想返回类似的东西

<img key={metricId} src={resImage} />

对于每个 metricId，所以最终的组件应该产生一个类似的元素：

  <>
   <img key='id1' src='image1src' />
   <img key='id2' src='image2src' />
   ... more images ...
  </>

如果我确实在 'then' 语句中返回，React 只会继续执行并且永远不会接受它。我尝试使用 await 调用 firebase.doGetFile()（将 map 函数更改为异步），但这仍然没有给我任何帮助。

如果我将 return 放在 'then' 之后，我此时没有 src 值，所以我只返回 <img key='id1' src='' /> 这显然不起作用。

接下来我可以尝试什么？

【问题讨论】：

你必须在组件挂载时加载图片，并保存在组件状态，这样一旦图片加载，组件会自动重新渲染。
嗨莎伦。一切顺利。只是关于 Stack Overflow 的简短说明 - 不太为人所知的是，社区希望 Stack Overflow 被视为有点像文档，而不是像聊天室或讨论论坛。因此，社区偏爱简洁、技术性的写作，没有绒毛和会话设备。
考虑到这一点，寻求帮助的一个好方法是让问题作者假设他们将完成大部分工作。 “我如何 foo 酒吧”、“如何弹出小部件”、“我能做些什么来让黄鼠狼发脾气”等都是很好的方法 - 它们也反映了工程师保留了他或她自己的代理权（“我可以做到这一点”）。相反，“请帮帮我”、“你能帮帮我吗”、“谁能帮帮我”都带着一种需要的、恳求的语气——它们不是技术性写作，但它们似乎是试图把工作交给读者。
这里的问题作者有时会得到帮助，即使他们跪下来大肆乞求，但我们这里的编辑宁愿他们没有。因此，如果可以的话，请记住保持简洁 - 怜悯我们！几乎没有足够的编辑来提高我们在这里收到帖子的速度。

标签： reactjs firebase react-async

【解决方案1】：

您应该将它们存储到 useState 然后在组件中获取您的数据并在功能组件中为 useEffect 的挂载周期，然后当 Firebase 在 then 中提供您的图像时，将它们设置为您将保留的变量与使用状态。我不熟悉 Firebase 流程，但您应该这样做：

const MetricImages = (metricIds, metricData) => {
   const [images, setImages] = useState([]);

   useEffect(() => {
      // Your data fetch methods will be here
      const url = metricData[moment(today).format('YYYY-MM-DD')][metricId]
      firebase
          .doGetFile(url)
          .then((resImage) => {
            setImages(resImage)
          })
   }, [])


   return <>
    {images.length > 0 ?
      {images.map(image =>
         <img src={image.src} ... />
      )}
    : <>loading..</>}
   </>
}

【讨论】：

谢谢！不知道为什么我没有想到！感谢您的帮助。