Question

我正在编写一个简单的React应用，该应用显示来自NASA API的“当天的照片”。我添加了一个日期输入，允许用户选择其他以前的日期并显示这些日期的照片。由于图片有时确实很大，因此我想展示一个微调框，直到图片完全加载后再显示。

我尝试向Photo组件添加isLoaded状态，然后在等待图像加载时有条件地渲染微调器。我的想法是，当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>
  );
}

我希望每次更改日期时，都显示一个微调框，直到加载图像，然后才能显示图像。我该怎么办？

Answer 1

添加一个isLoading状态，并在您的useEffect中设置/取消设置状态：

  const [isLoading, setIsLoading] = useState(false)

  // ... //

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

然后在返回时使用它：

  return (
    <div className="App">
      {!isLoading && 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>
  );

在等待加载新图像时，如何有条件地渲染微调器？

1 个答案: