为什么即使我正确调用状态数组也没有设置?

问题描述

我从昨晚开始就一直在努力解决这个问题,鉴于我是一个新开发者,这非常令人沮丧。

我正在尝试将 Firebase 存储中的所有图像显示到我的 Home.js 组件内的屏幕上。我在 firebase 存储中的 "images/" 文件夹中总共有 8 张图像。我在 Home 组件中编写了此代码

export default function Home() {
  var storageRef = firebase.storage.projectStorage.ref("images");
  const [imagesArray,setimagesArray] = useState([]);
  let tempImagesArray = [];

  useEffect(() => {
    storageRef
      .listAll()
      .then((res) => {
        res._delegate.items.forEach(function (imageRef) {
          //imageRef is containing the path to each image in the storage
          projectStorage
            .ref(imageRef._location.path_)
            .getDownloadURL()
            .then((url) => {
              tempImagesArray.push(url);
              setimagesArray((oldArr) => [...oldArr,url]);
            });
        });
      })
      .then((ress) => {
        console.log(tempImagesArray.length); **// displays: 8 which is correct!**
        console.log("state array is ",imagesArray); // returns an empty array
        console.log("temp images array is  ",tempImagesArray); // returns the CORRECT array containing URL links of all the images in the storage
      })
      .catch((err) => {
        console.log(err);
      });
    //This array contains ALL the images in the images storage bucket. Now display it :)
  },[]);

奇怪的部分是有时,通常如果我在很长时间后刷新页面,上面的代码有效并且 imagesArray 包含 8 个图像但如果我再次刷新它 - 它都过去了。

如果由于任何原因,你不能给我上述问题的解决方案,你能不能给我一种方法,我可以以某种方式使用 tempImagesArray 它不是一个状态数组来迭代链接显示它们Home 组件中的用户

PS:考虑到设置状态数组(imagesArray),我尝试了另外两种设置方法

setimagesArray(tempImagesArray) 

setimagesArray([...imagesArray,url])

PPS:既然有人重复了这个问题 - 这个问题如何与据说已经有答案的承诺问题相关联?当所有承诺都得到解决时,我不会尝试做任何事情,我正在尝试正确设置我的数组状态!这两者是如何联系在一起的?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)