我正在编写一个简单的react应用程序，它显示来自 NASA API 的“当天照片”。我添加了一个日期输入，允许用户选择不同的先前日期并显示这些日期的照片。由于图像有时非常大，我想显示一个微调器，直到图像完全加载后再显示。

我曾尝试向isLoadedPhoto 组件添加一个状态，然后在等待图像加载的同时有条件地渲染一个微调器。我的想法是，当 img onLoad 触发时，我将 isLoaded 更改为 true 并渲染图像。它似乎并没有真正起作用。

// App.js
function App() {
  const [pod, setPod] = useState({});
  const [date, setDate] = useState(today);

  const handleDateChange = e => {
    setDate(e.target.value);
  };

  useEffect(() => {
    axios
      .get(`${nasa_api}&date=${date}`)
      .then(res => {
        console.log(res.data);
        setPod(res.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, [date]);

  return (
    <div className="App">
      {Object.entries(pod).length ? (
        <>
          <Photo title={pod.title} date={date} url={pod.url} />
          <DatePicker date={date} handleDateChange={handleDateChange} />
          <Explanation explanation={pod.explanation} />
          <Footer copyright={pod.copyright} />
        </>
      ) : (
        <ReactLoading
          className="spinner"
          type="spin"
          color="blue"
          height="5%"
          width="5%"
        />
      )}
    </div>
  );
}

// Photo.js
function Photo(props) {
  return (
    <div className="photo">
      <h1>{props.title}</h1>
      <h3>Date: {props.date}</h3>
      <img src={props.url} alt="NASA Photo of the Day" />
    </div>
  );
}

我希望每次更改日期时，都会显示一个微调器，直到加载图像，然后才能显示图像。我怎样才能做到这一点？