如何从NASA API获取随机图片？React代码仅显示单张图求修正

原代码存在的问题 #

• API请求参数错误：camera${name}缺少等号，应为camera=${name}；earth_data拼写错误，正确参数是earth_date；api_key被多余双引号包裹，URL末尾斜杠无意义。
• 固定取第一张图片：每次直接调用res.data.photos[0]，导致始终显示同一张，无法实现随机效果。
• useEffect无依赖数组：会触发组件无限重复请求，且初始调用imageHandler()未传相机参数，请求会直接失败。
• 缺少错误处理：请求失败时未捕获异常，会导致页面报错崩溃。

修正后的代码 #

import React, { useEffect, useState } from 'react';
import Axios from 'axios';

const PictureOfTheDay = () => {
  const [fetchedImage, setFetchedImage] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  const imageHandler = (cameraName = 'FHAZ') => {
    setIsLoading(true);
    // 修正API参数格式与拼写
    Axios.get(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&sol=1000&camera=${cameraName}&api_key=MY_API_KEY`)
      .then((res) => {
        const photos = res.data.photos;
        if (photos.length > 0) {
          // 生成随机索引，从返回的照片数组中随机选一张
          const randomIndex = Math.floor(Math.random() * photos.length);
          setFetchedImage(photos[randomIndex].img_src);
        }
      })
      .catch(err => {
        console.error('图片请求失败:', err);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  useEffect(() => {
    imageHandler();
    // 空依赖数组确保仅在组件挂载时执行一次
  }, []);

  return (
    <section>
      <h3>Astronomy Picture Of The Day</h3>
      <div className="picture">
        <button onClick={() => imageHandler('FHAZ')}>FHAZ</button>
        <button onClick={() => imageHandler('RHAZ')}>RHAZ</button>
        <button onClick={() => imageHandler('MAST')}>MAST</button>
        <button onClick={() => imageHandler('CHEMCAM')}>CHEMCAM</button>
      </div>
      {isLoading ? (
        <p>加载中...</p>
      ) : (
        fetchedImage && <img src={fetchedImage} alt="火星照片" />
      )}
    </section>
  );
};

export default PictureOfTheDay;

关键修改说明 #

• 修正API请求的参数拼写与格式，确保请求能正常返回照片数据。
• 新增随机索引逻辑：通过Math.random()结合Math.floor()生成数组范围内的随机索引，实现每次点击按钮随机获取对应相机的一张照片。
• 添加加载状态isLoading，优化用户体验，避免图片未加载时显示空内容。
• 为useEffect添加空依赖数组，避免无限重复请求；初始调用默认传入'FHAZ'相机参数，确保首次加载有数据。
• 增加catch捕获请求异常，防止页面因请求失败崩溃。

内容的提问来源于stack exchange，提问作者Vaibhav Kumar