如何使用 React Hooks 根据组件的当前状态更新组件的状态？

Question

在我的组件中，我正在运行一个函数，该函数循环访问状态中的键，并在异步函数完成时更新属性。但是，它看起来正在将状态更新为函数运行之前存在的状态。

这是我的组件的代码：

interface VideoDownloaderProps {
  videos: string[];
}
const VideoDownloader: React.FC<VideoDownloaderProps> = ({ videos }) => {
  const [progress, setProgress] = useState({} as { [key: string]: string });
  const [isDownloading, setIsDownloading] = useState(false);
  async function initialSetup(vids: string[]) {
    const existingKeys = await keys();
    setProgress(
      vids.reduce<{ [key: string]: string }>((a, b) => {
        a[b] = existingKeys.indexOf(b) > -1 ? "downloaded" : "queued";
        return a;
      }, {})
    );
  }
  useEffect(() => {
    initialSetup(videos);
  }, [videos]);
  async function download() {
    setIsDownloading(true);
    const existingKeys = await keys();
    for (const videoUrl of videos) {
      if (existingKeys.indexOf(videoUrl) === -1) {
        setProgress({ ...progress, [videoUrl]: "downloading" });
        const response = await fetch(videoUrl);
        const videoBlob = await response.blob();
        await set(videoUrl, videoBlob);
      }
      setProgress({ ...progress, [videoUrl]: "downloaded" });
    }
    setIsDownloading(false);
  }
  return (
    <div>
      <button disabled={isDownloading} onClick={download}>
        Download Videos
      </button>
      {Object.keys(progress).map(url => (
        <p key={url}>{`${url} - ${progress[url]}`}</p>
      ))}
    </div>
  );
};

从本质上讲，这会循环访问 URL 列表，下载它们，然后将状态中的 URL 设置为 "downloaded" 。但是，我看到的行为是，一旦下一个 URL 开始下载，URL 就会从 "queued" 转移到"downloading"，然后再回到"queued"。

我认为罪魁祸首是这句话：

setProgress({ ...progress, [videoUrl]: "downloaded" });

我认为progress总是处于与download执行时相同的状态。

在 Hooks 之前，我可以将更新程序函数传递给 setState ，但我不确定如何在 useState 钩子中重用现有状态。

Answer 1

您可以像传递 setState 一样传递更新程序函数。因此，在此代码中，您将运行：

setProgress(progress => ({ ...progress, [videoUrl]: "downloading" }));

这将传递当前值 progress允许您根据其当前值更新状态。