reactjs - 显示存储 Firebase 中的图像 (React#)

Question

我可以从我的StorageFirebase 中获取图像。

const [myImages, setMyImages] = useState();

    useEffect(() => {

      const storage = getStorage();
      const listRef = ref(storage, 'somefolder');

      const allImages = listAll(listRef).then((res) => {

        res.items.forEach((itemRef) => {

          getDownloadURL(ref(storage, `somefolder/${itemRef.name}`)).then((img) =>{
            console.log(img) //link to image
            setMyImages(img)
          }).catch(err => {
            console.log('error getting images ', err);
          })

        })

      }).catch((error) => {
        console.log('error getting all files ', error);
      });


    }, []);

img- 它链接到特定（一个）图像。现在我想将它保存到setMyImages然后在现场渲染：

  return (
    <>
       {myImages.map((oneImg) => (
              <img src={oneImg.img} />
       ))}
    </>
  )

但有些不对劲map

更新

 const [myImages, setMyImages] = useState([]);

 setMyImages(...img)

标签： reactjsreact-hooksuse-state

Answer 1

以下代码为您工作。由于异步请求，我已经用 for-in lopp 替换了 forEach 循环。我在循环之前创建了一个数组，并从循环中将图像推入其中。

初始化所有内容后，我将使用新数组设置状态。就像你已经在做的那样在 JSX 中呈现

此外，如果您想在加载图像时显示图像，那么您可以这样做

const [myImages, setMyImages] = useState([]);

  useEffect(() => {
    const storage = getStorage();
    const listRef = ref(storage, "somefolder");

    listAll(listRef)
      .then(async (res) => {
        let imagesArray = [];
        for (let i in res.items) {
          const itemRef = res.items[i];
          const img = await getDownloadURL(
            ref(storage, `somefolder/${itemRef.name}`)
          );
          imagesArray.push(img);
        }
        setMyImages(imagesArray);
      })
      .catch((error) => {
        console.log("error getting all files ", error);
      });
  }, []);



return (
    <>
       {myImages.map((oneImg) => (
              <img src={oneImg.img} />
       ))}
    </>
  )

此外，如果您想在加载图像时显示图像，那么您可以这样做

const [myImages, setMyImages] = useState([]);

  useEffect(() => {
    const storage = getStorage();
    const listRef = ref(storage, "somefolder");

    listAll(listRef)
      .then(async (res) => {
        for (let i in res.items) {
          const itemRef = res.items[i];
          const img = await getDownloadURL(
            ref(storage, `somefolder/${itemRef.name}`)
          );
          setMyImages([...myImages, img]);
        }
   
      })
      .catch((error) => {
        console.log("error getting all files ", error);
      });
  }, []);