React项目从Firebase Storage获取图片渲染时map方法异常如何解决

问题根因 #

你遇到的报错由两个核心问题导致：

1. 状态更新逻辑错误，没有正确把图片链接追加到数组中
2. 渲染时取值逻辑错误，多余访问了不存在的.img属性

正确实现方案 #

1. 状态声明

你已经修正了初始值为数组，这部分是正确的：

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

2. 获取图片逻辑（推荐用Promise.all批量获取，减少重渲染次数）

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

  listAll(listRef)
    .then(async (res) => {
      // 生成所有下载链接的请求队列
      const imgUrlPromises = res.items.map(itemRef => 
        getDownloadURL(ref(storage, `somefolder/${itemRef.name}`))
      )
      // 等待所有请求完成拿到完整的链接数组
      const allImgUrls = await Promise.all(imgUrlPromises)
      // 一次性更新状态
      setMyImages(allImgUrls)
    })
    .catch((error) => {
      console.log('获取文件列表失败: ', error);
    });
}, []);

如果要保留逐个获取的写法，需要改用函数式状态更新，不能直接覆盖状态或者错误展开字符串：

// 把你之前循环里的setMyImages(img)替换为下面的写法
setMyImages(prevState => [...prevState, img])

你之前写的setMyImages(...img)是错误写法：img是字符串类型，展开运算符会把字符串拆成单个字符的数组，完全不符合需求。

3. 渲染逻辑修改

因为状态里存的就是图片链接字符串，不需要再取.img属性，同时加上必填的key属性：

return (
  <>
     {myImages.map((oneImg, index) => (
            <img key={index} src={oneImg} alt="存储图片" />
     ))}
  </>
)

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