如何在反應中從 nasa APOD api 反向獲取圖像

Question

** 我使用此代碼從 API 獲取內容**

    import React from "react";
import styles from "./Space.module.css";

import {useState,useEffect} from "react";
function Space() {
  const [photoData,setPhotoData]=useState(null);
  useEffect(()=>{
fetchPhoto();
async function fetchPhoto(){
  const res = await fetch(`https://api.nasa.gov/planetary/apod?api_key=hETQq0FPsZJnUP9C3sUEFtwmJH3edb4I5bghfWDM`);
  const data=await res.json();
  setPhotoData(data);
  console.log(data);
}
  },[]); //empty array for running only once then empty array for that 
 

  if (!photoData) return <div />;
  
  return (
    <>
    <div className={styles.space}>
      {photoData.media_type === "image" ? (
        <img 
          src={photoData.url}
          alt={photoData.title}
          className={styles.space}
        />
      ) : (
        <iframe
          title="space-video"
          src={photoData.url}
          frameBorder="0"
          gesture="media"
          allow="encrypted-media"
          allowFullScreen
          className={styles.space}
        />
      )}
      <div>
        <h1>{photoData.title}</h1>
        <p className={styles.space.date}>{photoData.date}</p>
        <p className={styles.space.explanation}>{photoData.explanation}</p>
      </div>
      
    </div>
    </>
  );
}
export default Space;

和此代碼的 output 是這樣的 我希望 Button 和 next 然后顯示前一天的圖像，所以任何人都可以告訴我如何通過反轉前一天的圖像單擊下一個按鈕后反轉這意味着，因為 NASA APOD（當天的天文圖片）每天每天都會向所有用戶展示這樣的內容我知道我們可以扭轉這種情況，但誰能告訴我該怎么做？

Answer 1

您可以使用 apod api 的date查詢參數來獲取特定日期的數據。 這在today具有默認值。 日期需要采用 YYYY-MM-DD 格式。 請參閱https://api.nasa.gov/上的 apod 部分

如果您想請求 2021 年 1 月 2 日的數據，您必須向此發送請求：

https://api.nasa.gov/planetary/apod?date=2021-01-02&api_key=hETQq0FPsZJnUP9C3sUEFtwmJH3edb4I5bghfWDM

_{注意date參數}

要獲取前一天的日期，請使用：

let today = new Date();
let yesterday = new Date();

yesterday.setDate(today.getDate() - 1);
console.log(yesterday.toString());

要以 YYYY-MM-DD 格式格式化日期，請參閱此問題。

In onClick function of your button you'll make this http request and then change state with setPhotoData function.