如何在 React 中每 5 秒渲染一张图像？

Question

每次您输入此网址： https: //picsum.photos/200时，都会显示不同的图像。我希望我的 React 组件使用此 url 每 5 秒渲染一个不同的图像，但我做不到。这是我的代码：

import { useEffect, useState } from "react";

const VariableImage = () => {
  const imageUrl = "https://picsum.photos/200";

  const [image, setImage] = useState(imageUrl);

  useEffect(() => {
    setInterval(() => {
      const newImage = new Image();
      newImage.src = imageUrl;
      setImage(imageUrl);
    }, 5000);
  }, [imageUrl]);

  return (
    <>
      <img src={image} alt="scenery" height="200" width="200" />
    </>
  );
};

export default VariableImage;

图像在第一次渲染中显示，但稍后不会更改。如果有人可以帮助我，我将非常感激。谢谢。

Answer 1

将虚拟随机查询参数添加到外部 URL，以强制浏览器发出新请求（并为您提供新图像）。

这样做new Image对你没有任何帮助——你可以完全放弃它。

const { useEffect, useState } = React;

const imageUrl = "https://picsum.photos/200";
const VariableImage = () => {
  const [src, setSrc] = useState(imageUrl);
  useEffect(() => {
    setInterval(() => {
      setSrc(imageUrl + '?forcerefresh=' + Math.random());
    }, 5000);
  }, []);

  return <img src={src} alt="scenery" height="200" width="200" />;
};

ReactDOM.createRoot(document.querySelector('.react')).render(<VariableImage />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>