Reactjs 反应useEffect未正确更新状态

我试图通过在组件装载时执行异步操作来更新react中的状态。我在

images

道具中有一个图像ID列表，该组件应该在装载时遍历每个ID并获取firebase存储中图像的实际url。然而，包含url的数组一次只能在其中获取一个url，尽管有许多ID通过images属性传递给它。我做错了什么

import React, { useEffect, useState } from 'react';
import { Panel, Carousel, Divider } from 'rsuite';
import { storage } from '../../misc/firebase';

const ListingItem = ({ title, images, owner, props }) => {
  const [imageUrls, setImageUrls] = useState([]);

  useEffect(() => {
    for (const img in images) {
      storage
        .ref(`listings/${owner}/images`)
        .child(images[img])
        .getDownloadURL()
        .then(url => setImageUrls([...imageUrls, url])); // this should append the url to imageUrls
    }
  }, []);

  return (
    <Panel
      {...props}
      shaded
      bordered
      bodyFill
      style={{ display: 'inline-block', height: '100' }}
    >
      <Carousel>
        { /* This only ever outputs a single image */ }
        {imageUrls.length !== 0 &&
          imageUrls.map((img, idx) => <img src={img} key={idx} />)}
      </Carousel>
      <Panel header={title}>
        <small>foo</small>
      </Panel>
    </Panel>
  );
};

export default ListingItem;

import React，{useffect，useState}来自“React”；
从“rsuite”导入{面板、转盘、分隔器}；
从“../../misc/firebase”导入{storage}；
const ListingItem=（{标题、图像、所有者、道具}）=>{
const[imageUrls，setImageUrls]=useState（[]）；
useffect（（）=>{
用于（图像中的常量img）{
存储
.ref（`listings/${owner}/images`）
.child（图像[img]）
.getDownloadURL（）
。然后（url=>setImageUrls（[…imageUrls，url]）；//这应该将url附加到imageUrls
}
}, []);
返回(
{/*仅输出单个图像*/}
{imageURL.length！==0&&
imageURL.map（（img，idx）=>）}
福
);
};
导出默认列表项；

挂载时，

useffect

回调只运行一次。装载时，

imageUrls

状态变量初始化为空数组。因此，在

useffect

回调中，如下所示：

.then(url => setImageUrls([...imageUrls, url]));

将始终等同于：

.then(url => setImageUrls([, url]));

因为初始数组是空的

改为使用回调表单，以便根据当前状态设置新状态，而不是根据旧（现在可能已过时）闭包中的变量：

---

装载时，

useffect

回调仅运行一次。装载时，

imageUrls

状态变量初始化为空数组。因此，在

useffect

回调中，如下所示：

.then(url => setImageUrls([...imageUrls, url]));

将始终等同于：

.then(url => setImageUrls([, url]));

因为初始数组是空的

改为使用回调表单，以便根据当前状态设置新状态，而不是根据旧（现在可能已过时）闭包中的变量：

缺少useffect的依赖项，

}，[images]

，您也可以假设

存储

是一个异步操作，所以应该等待它缺少useffect的依赖项，[images]，您也可以假设

存储

是一个异步操作，所以应该等待它