反应 useEffect 未正确更新 State

Question

我正在尝试通过在组件安装时执行异步操作来更新 state 以作出反应。 我在images属性中有一个图像 id 列表，开始时安装组件应该遍历每个 id，并将实际的 url 抓取到 firebase 存储中的图像。 然而，包含 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;

Answer 1

useEffect回调仅在挂载时运行一次。 在挂载时， imageUrls state 变量被初始化为空数组。 结果，在useEffect回调中，这个：

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

将始终等同于：

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

因为初始数组是空的。

请改用回调形式，以便根据当前的 state 设置新的 state ，而不是根据旧的（现在可能已过时的）闭包中的变量：

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